在提交之前验证两个表单字段是否相同

Question

我试图让此表单仅在两个表单字段具有相同值时才提交。它在另一种形式中正常工作，但这种形式绕过了字段检查并只是提交。

    <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"
        }
    }
});

Answer 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"
    }
}

演示：http://jsfiddle.net/HE5t8/1/