我试图让这个表单仅在两个表单字段具有相同值时才提交。它在另一种形式下正常工作,但是这个是绕过字段检查并且只是提交。
<form id="accounts-user-form" style="display: none;" novalidate="novalidate">
<div class="box">
<div class="box-header-panel">
<h2>New User</h2>
<div class="box-icon" id="accounts-user-form-close">
<i class="fa fa-arrow-circle-down"></i>
</div>
</div>
<div class="box-content">
<div class="box">
<div class="box-content">
<div class="step-content">
<div class="row">
<div class="col-lg-12">
<div class="col-xs-6">
<div class="form-horizontal">
<div class="form-group">
Title
<div class="controls">
<input id="selectError9" class="form-control col-xs-6" data-bind="value:UserHolder.Title" />
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
First Name
<div class="controls">
<input id="selectError10" class="form-control col-xs-6" data-bind="value: UserHolder.FirstName" />
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
Last Name
<div class="controls">
<input id="selectError11" class="form-control col-xs-6" data-bind="value: UserHolder.LastName" />
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
Email
<div class="controls">
<input id="selectError11" class="form-control col-xs-6" data-bind="value: UserHolder.Email" />
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
Phone
<div class="controls">
<input id="selectError12" class="form-control col-xs-6" data-bind="value: UserHolder.Phone" />
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-horizontal">
<div class="form-group">
Phone Type
<div class="controls">
<select id='selectError13' class='form-control' data-bind="value: UserHolder.PhoneTypeId"></select>
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
Contact Type
<div class="controls">
<select id='selectError14' class='form-control' data-bind="value: UserHolder.ContactTypeId"></select>
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
Password
<div class="controls">
<input id="password" type="password" class="form-control col-xs-6">
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
Confirm
<div class="controls">
<input id="password_again" type="password" class="form-control col-xs-6">
</div>
</div>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="controls">
<input id="selectError16" type="password" class="form-control col-xs-6 password-hidden" data-bind="value: UserHolder.Password">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-content">
<button id="btn_add_user_large" class='btn btn-large btn-primary btn-round' name="submit">Add User <i class='fa fa-arrow-circle-down'></i></button>
</div>
</div>
</div>
</div>
</div>
</form>
JQUERY:
$('#btn_add_user_large').click(function () {
var isvalidate = $("#accounts-user-form").valid();
if (isvalidate) {
addUser();
}
event.preventDefault();
});
$("#accounts-user-form").validate({
rules: {
password: "required",
password_again: {
equalTo: "#password"
}
}
});
答案 0 :(得分:1)
您未能在输入元素中包含name
属性。此插件要求带验证的输入具有唯一的name
。
<input id="password" name="password" type="password" class="form-control col-xs-6">
<input id="password_again" name="password_again" type="password" class="form-control col-xs-6">
rules
选项使用字段name
...
rules: {
password: "required", // <- the field has name="password"
password_again: { // <- the field has name="password_again"
equalTo: "#password"
}
}