javascript - JQuery 使用 Bootstrap 4 验证表单输入和突出显示标签
问题描述
我读过我读过带有 jQuery Validation Plugin 的 Bootstrap,它很有帮助,但它是 Bootstrap 3,而不是Bootstrap 4。
我正在使用JQuery Validate和Bootstrap 4,但似乎无法让标签和输入字段在无效时突出显示红色。
我认为valid
和invalid
输入类在BS中是默认的,链接?也许我使用不正确。
我的代码在下面,这是一个小提琴。
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
and invalid
is is-invalid
。
此外,它们需要应用于输入,而不是输入组包装器。
编辑:
如果要突出显示两者,则需要重新排序输入和标签。
$(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>
推荐阅读
- kubernetes - Flannel 访问外部服务
- python - 如何在 python 中导入 google.datalab 时修复语法错误
- javascript - Discord 机器人图像未显示
- python-3.x - 连接熊猫中的列
- c# - ArgumentNullException:值不能为空。参数名称:连接字符串
- haskell - 无法在 Windows 10 上为 Haskell 安装 z3 包
- install4j - 我可以获得用于从应用程序内启动应用程序的 i4jruntime.jar 版本吗?
- java - 尝试将值放入 ignite 缓存时,Ignite 集群不可用
- android - Firestore Recycler 适配器 - 来自 firestore 的图像
- botframework - 如何将 BotFramework 与 Hangouts Chat 集成