jQuery验证require_from_group无法正常工作

问题描述 投票:0回答:1

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

但是,我无法让这个工作。我有以下字段:

  1. 用户名
  2. 输入密码
  3. accountName1
  4. accountName2
  5. enterPassword1
  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-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
jquery jquery-validate
1个回答
1
投票

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

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

但是,你的字段中没有一个包含class="send",请注意accountName1enterPassword1应该匹配该字段的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的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
        ....
    });
}
© www.soinside.com 2019 - 2024. All rights reserved.