Question

我已经回顾了一些与验证相关的答案，包括Jquery validate require from group not working

然而，我无法让它发挥作用。我有以下字段：

accountName
enterPassword
accountName1
accountName2
enterPassword1
enterPassword2

必须输入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"]
....

但是，您的所有字段都不包含class="send"，请注意accountName1和enterPassword1应与 name 相匹配字段，不 id。

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

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

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

由于name是插件跟踪输入的方式，因此name必须与rules .validate() newEntry: { require_from_group: [1, ".input-group"] },对象中使用的参数相匹配不要重复。

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

additional-methods.js

最后，你要包含require_from_group的1.9版，我们看不到jQuery Validate的版本。请注意，版本1.9非常陈旧，并且从那时起已修复了groups的许多错误。

否则，您的代码正在运行：https://jsfiddle.net/van2havr/

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

另一个注意事项：

您没有利用传递给form的开发人员提供的函数参数。您可以将其称为contactForm或将其保留为submitHandler : function(contactForm) { // var frm = $('#contactForm'); // <-not needed $.ajax({ .... data: $(contactForm).serialize(), // <- use it like this .... }); }。

sample mean +/- 1.96 * std.err

jQuery验证require_from_group无法正常工作

1 个答案: