jQuery验证require_from_group不起作用



我已经审查了一些与验证有关的答案,包括jQuery验证的要求

gro点

但是,我无法做到这一点。我有以下字段:

  1. 帐户名
  2. Enterpassword
  3. AccountName1
  4. AccountName2
  5. interpassword1
  6. 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-zd$@$!%*?&]{8,}/,
            minlength: 8
        },
        enterPassword2: {
            regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?&]{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

您已经定义了规则...

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

但是,您的字段都不包含class="send",请注意,accountName1enterPassword1应该与该领域的 name 匹配, not 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
        ....
    });
}

相关内容

  • 没有找到相关文章

最新更新