JQuery Validate 似乎与 Bootstrap 冲突
Posted
技术标签:
【中文标题】JQuery Validate 似乎与 Bootstrap 冲突【英文标题】：JQuery Validate appears to conflict with Bootstrap 【发布时间】：2017-07-27 21:27:17 【问题描述】：我有一个使用 Bootstrap 和 JQuery 的表单。我正在尝试使用 JQuery validate 验证表单，但是每当我尝试添加 validate_min.js 脚本时，它都会停止我的表单的其余部分工作。我已将表单缩减为这个示例。
我有一个文本字段，下拉菜单中有一些预设值。在没有验证的情况下，我可以选择一个预设值，并将其插入到文本字段中。如果 jquery.validate_min.js 行未注释，这将停止工作。 （如果我取消注释该行，表单将正确验证，因此它的一部分正在工作。）
html:
<!doctype html>
<html>
<head>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet">
<link href="css/bootstrap-select.min.css" rel="stylesheet">
<link href="css/forms.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<!--<script src="js/jquery.validate.min.js"</script>-->
<script src="js/bootstrap.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/form-test2.js"></script>
</head>
<body>
<div class="page-header">
<h1>Test Form Layout</h1>
</div>
<form class="form-horizontal" method="POST" action="#" id="validate_test">
<div class="form-group">
<label class="control-label col-sm-3" for="preset_box">Preset test</label>
<div class="col-sm-3">
<div class="input-group">
<input class="form-control" id="preset_box" name="preset_box">
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">Presets <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-left">
<li><a href="#" id="pre_1">Preset 1</a></li>
<li><a href="#" id="pre_2">Preset 2</a></li>
<li><a href="#" id="pre_3">Preset 3</a></li>
</ul>
</div> <!-- input-group-btn -->
</div> <!-- input-group -->
</div> <!-- col-sm-3 -->
</div> <!-- form-group -->
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!--
<script>
$("#dustdistform").validate(
// ignore: ".novalidate",
rules:
);
</script>
-->
</body>
</html>
form-test2.js：
$(document).ready(function()
$("#pre_1").click(function()
$("#preset_box").val("10");
);
$("#pre_2").click(function()
$("#preset_box").val("20");
);
$("#pre_3").click(function()
$("#preset_box").val("30");
);
);
【问题讨论】：
【参考方案1】：您好，如果您正在尝试验证表单，那么可以像这样轻松完成。 输入您的表格并输入名称，然后检查其是否为空。
function validateForm()
var x = document.forms["myForm"]["fname"].value;
if (x == "")
alert("Name must be filled out");
return false;
【讨论】：
如果没有人能解决我的问题，这可能是我会求助的方法，但真正的形式很长，我想对其进行相当多的验证。 JQuery 验证非常适合我正在尝试做的事情，只是它破坏了我的表单！以上是关于JQuery Validate 似乎与 Bootstrap 冲突的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Validate SubmitHandler 与 Ajax 提交没有被击中
Bootstrap 与 Jquery validate 结合使用——多个规则实现
DirtyForms 与 jQuery Validate 的 submitHandler() 方法一起使用时无法正常工作