jQuery验证表单输入和使用Bootstrap 4高亮显示标签 [英] JQuery Validate Form Inputs & Highlight Labels with Bootstrap 4
问题描述
我已阅读我已阅读带有jQuery验证插件的Bootstrap 很有帮助,但它是Bootstrap 3,不是 Bootstrap 4.
I have read I have read Bootstrap with jQuery Validation Plugin and it's helpful, but it's Bootstrap 3, not Bootstrap 4..
我正在将 JQuery Validate 与 Bootstrap 4 一起使用,但似乎无法使用在无效时将标签和输入字段变为突出显示红色.
I'm using JQuery Validate with Bootstrap 4, but can't seem to get the label and input field to highlight red when it's invalid.
I thought the valid
and invalid
input classes were default in BS, link? Maybe i'm using them incorrectly.
我的代码在下面,这是一个小提琴.
My code is below, here's a fiddle.
HTML
<form id="myform">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="form-group">
<label for="name" class="control-label">Email address</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
JQuery
$(function() {
$("#myform").validate({
rules: {
name: {
required: true,
minlength: 2
}
},
highlight: function(element) {
$(element).closest('.form-group').removeClass('valid').addClass('invalid');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('invalid').addClass('valid');
},
});
})
感谢您的帮助.
推荐答案
这些类在最新版本. valid
重命名为is-valid
,invalid
为is-invalid
.
These classes have changed in the most recent release. valid
was renamed to is-valid
and invalid
is is-invalid
.
此外,它们需要应用于输入,而不是输入组包装.
Also, they need to be applied to inputs, not input group wrappers.
如果要突出显示输入和标签,则需要重新排序.
You need to reorder the input and label if you want both to be highlighted.
$(function() {
$("#myform").validate({
rules: {
name: {
required: true,
minlength: 2
}
},
highlight: function(element) {
$(element).removeClass('is-valid').addClass('is-invalid');
},
unhighlight: function(element) {
$(element).removeClass('is-invalid').addClass('is-valid');
},
});
})
.reversed{padding: 3rem 0 0 0;}
.reversed .control-label{margin: -4.5rem 0 0 0; float: left;}
input.is-valid ~ label{color: green;}
input.is-invalid ~ label{color: red;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form id="myform">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="form-group reversed"><!-- added reversed class -->
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
<label for="name" class="control-label">Email address</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
这篇关于jQuery验证表单输入和使用Bootstrap 4高亮显示标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!