jQuery 验证 require_from_group 无效

Question

我查看了一些与验证相关的答案，包括

但是，我无法让它工作。我有以下字段：

账户名
输入密码
账户名1
账户名2
输入密码1
输入密码2

必须输入accountName1 或enterPassword1。当我单击“更新”按钮（未输入任何一个字段）时，没有显示任何错误消息。

HTML:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"></script>

<form data-toggle="validator" role="form" id="contactForm">
        <div class="row">
            <div class="col-md-12">
                <div class="form-signin">

                    <h2 class="form-signin-heading">Please update your account details:</h2>

                    <div class="input-group">
                        <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i></span>
                        <input id="accountName" name="accountName" type="text" class="input-block-level" placeholder="Current Account">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input id="enterPassword" name="enterPassword"  type="password" class="input-block-level" placeholder="Current password">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i></span>
                        <input id="accountName1" name="newEntry" type="text" class="input-block-level" placeholder="New account">
                    </div>
                     <div class="input-group">
                        <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i></span>
                        <input id="accountName2" name="accountName2" type="text" class="input-block-level" placeholder="Confirm new account">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input id="enterPassword1" name="newEntry"  type="password" class="input-block-level" placeholder="New password"
                            data-toggle="tooltip" title="Enter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric.">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input id="enterPassword2" name="enterPassword2"  type="password" class="input-block-level" placeholder="Confirm new password"
                            data-toggle="tooltip" title="Enter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric.">
                    </div>
                    <button id="submit" class="btn btn-large btn-primary" >Update </button>

                </div>
            </div>
        </div> <!-- /row -->
    </form>

jQuery:

$(document).ready(function(){
$.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            if (regexp.constructor != RegExp)
                regexp = new RegExp(regexp);
            else if (regexp.global)
                regexp.lastIndex = 0;
            return this.optional(element) || regexp.test(value);
        },
        "Please enter correct Characters."
);

$('[data-toggle="tooltip"]').tooltip();
$("#contactForm").validate({
    groups: {  // consolidate messages into one
        names: "accountName enterPassword accountName1 enterPassword1 accountName2 enterPassword2 newEntry"
    },
    rules: {
        accountName: {
            required: true,
            minlength: 2
        },

        enterPassword: {
            required: true,
            minlength: 8
        },

        accountName1: {
            require_from_group: [1, ".send"],
            minlength: 2
        },

        accountName2: {
            minlength: 2,
            equalTo: "#accountName1"
        },

        enterPassword1: {
            require_from_group: [1, ".send"],
            regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/,
            minlength: 8
        },

        enterPassword2: {
            regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/,
            minlength: 8,
            equalTo: "#enterPassword1"
        },

        newEntry: {
            require_from_group: [1, ".input-group"]
        },
    },


    messages: {
        accountName: {
            required: "Please enter your current account name.",
            minlength: "Your account name must consist of at least 2 characters."
        },

        enterPassword: {
            required: "Please enter your current password.",
            minlength: "Your password must consist of at least 8 characters."
        },

        accountName1: {
            minlength: "Your account name must consist of at least 2 characters."
        },

        accountName2: {
            minlength: "Your account name must consist of at least 2 characters.",
            equalTo: "Your confirmation account name does not match the original."
        },

        enterPassword1: {
            regex: "Please nter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric.",
            minlength: "Your password must consist of at least 8 characters."
        },

        enterPassword2: {
            regex: "Please enter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric.",
            minlength: "Your password must consist of at least 8 characters.",
            equalTo: "Your confirmation password does not match the original."
        }
    },

    submitHandler : function(contactForm) {
        //do something here
        var frm = $('#contactForm');
        //alert($("#accountName1").val());

        $.ajax({
            type: "POST",
            url: "UpdateAccountView",
            cache: false,
            data: frm.serialize(),
            success: function(data){
                console.log('Submission was successful.');
                console.log(data);

                $("#accountName").focus();
                $('#ajaxGetUserServletResponse').text(data);
            }
        });
    }
});      
}); // end document.ready

Answer 1

您已经定义了您的规则...

accountName1: {
    require_from_group: [1, ".send"]
....
enterPassword1: {
    require_from_group: [1, ".send"]
....

但是，none 个字段包含 class="send"，请注意 accountName1 和 enterPassword1 应该匹配 name的字段，NOT id.

您的 name 属性在几个地方也有问题...

<input id="accountName1" name="newEntry" ...

<input id="enterPassword1" name="newEntry"   ...

由于 name 是插件跟踪输入的方式，您的 name 必须与您在 .validate() 的 rules 对象中使用的参数相匹配，并且它不应该重复。

您还在规则中定义了以下内容，但这没有任何意义...

newEntry: {
    require_from_group: [1, ".input-group"]
},

最后，您包含了 additional-methods.js 的 1.9 版，我们看不到 jQuery Validate 的版本。请注意，1.9 版非常旧，许多 require_from_group 的错误已从那时起得到修复。

否则，您的代码有效：https://jsfiddle.net/van2havr/

注意：为了清楚起见，我禁用了 groups 选项。（我从字段列表中删除了 newEntry）

另注：

您没有利用开发人员提供的传递给 submitHandler 的函数参数。您可以将其命名为 form 或将其保留为 contactForm.

submitHandler : function(contactForm) {

    // var frm = $('#contactForm'); // <-not needed

    $.ajax({
        ....
        data: $(contactForm).serialize(), // <- use it like this
        ....
    });
}

jQuery 验证 require_from_group 无效

jQuery validation require_from_group not working

jquery

jquery-validate