我有一个包含一个字段的表单，并且我通过 jquery 验证 来验证该字段。但我的表单在所有情况下都是如此，但在 js 中我注入(inject)了约束，验证不起作用。
帮我解决这个问题。谢谢。
这是index.html中的form:
<head>
<title>Form</title>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<script src="jquery-validation/dist/jquery.validate.min.js"></script>
<script src="src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="validation.js"></script>
</head>
<body>
<div class="p-x-1 p-y-3">
<form id="form" class="card card-block m-x-auto bg-faded form-width" method="POST" action="go" name="validation">
<legend class="m-b-1 text-xs-center">Enter data</legend>
<div class="form-group input-group">
<span class="has-float-label">
<input class="form-control" name="name" id="name" type="text" placeholder="Name"/>
<label for="name">Name</label>
</span>
</div>
<div class="text-xs-center">
<button class="btn btn-block btn-primary" type="submit">Edit</button>
</div>
</form>
</div>
</body>
这是用于验证的 js 脚本:
$(function() {
// Form contain attribute name="registration".
$("form[name='validation']").validate({
rules: {
name: {
required: true,
minlength: 5
}
},
// Error message.
messages: {
name: "Error"
},
submitHandler: function(form) {
form.submit();
}
});
});
我在 index.html 的同一文件夹中有 jquery-validation 库。
最佳答案
您的代码按此顺序导入 css 和 js
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
<script src="jquery-validation/dist/jquery.validate.min.js"></script>
<script src="src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="validation.js"></script>
但是你应该首先导入jquery，然后导入它的扩展，即jquery验证。为了更安全，我还建议在导入引导组件文件之前使用 jquery。因此，您正确的导入顺序是:-
<script src="src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"/>
<link href="style.css" rel="stylesheet">
<script src="jquery-validation/dist/jquery.validate.min.js"></script>
<script src="validation.js"></script>
虽然，这是断章取义的，但是，您应该在引导 css 文件之后导入自定义 css。
关于javascript - 为什么 jquery 验证不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44720535/