Pri*_*ign 0 javascript jquery jquery-validate
我一整天都在为 JQuery 验证问题而苦苦挣扎。它仅验证第一个字段。
我已经成功地在这里重现它:
$(document).ready(function() {
$('#go').click(function() {
console.log('go clicked');
if ($('#detailsForm').valid()) {
alert('if you see this then the form is valid.');
}
});
});Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@1.10.0" data-semver="1.10.0" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script data-require="jquery-validate@1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<script data-require="jquery-validate@1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>This doesn't work :(</h1>
<form id="detailsForm">
<div class="row guttered-bottom">
<div class="col-md-6 col-xs-12">
<div class="row">
<div class="col-md-12 col-xs-12">
<br />
First Name<div style="color:#E320C9">*</div>
<div class="input-container">
<input id="ReserveFirstName" type="text" class="input-large input-wide" placeholder="Enter your first name" required="true" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<br />
Last Name<div style="color:#E320C9">*</div>
<div class="input-container">
<input id="ReserveLastName" type="text" class="input-large input-wide" placeholder="Enter your last name" required="true" />
</div>
</div>
</div>
</div>
</div>
</form>
<br>
<button id="go">CLICK ME! </button>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
重现步骤:单击按钮并观察第一个字段(名字)出现验证消息。输入名字并再次单击该按钮。请注意,即使这两个字段都是必需的,该表单似乎仍然有效。
我究竟做错了什么?
jQuery Validate 需要每个输入都有一个name属性。如果没有这个,它就无法正确创建用于存储验证结果的输入对象。
只需为每个输入添加一个唯一的名称即可:
<input name="ReserveFirstName" id="ReserveFirstName" type="text" class="input-large input-wide" placeholder="Enter your first name" required="true" />
<input name="ReserveLastName" id="ReserveLastName" type="text" class="input-large input-wide" placeholder="Enter your last name" required="true" />
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1619 次 |
| 最近记录: |