jQuery 验证器添加方法无效

Question

我正在使用 jquery 验证器添加方法进行验证。单击 .btn-md 按钮事件会触发并显示我给出的警报。但是添加方法不起作用。

HTML代码：

<div class="container">    
    <div class="lg_cont">       
        <h2>Reset your Password</h2>      
        <form method="post" class="lg_form" name="lg_form" id="formresetpwd">  
            <p class="lg_inp"><label for="pwd">Password <span>*</span></label>   
                <!--<span><i class="fa fa-lock"></i></span>-->           
                <input type="password" name="pwd" id="pwd" class="txt"/>            
            </p>         
            <p class="lg_inp">
                <label for="lg_pass">Retype Password <span>*</span></label>        
                <!--<span><i class="fa fa-lock"></i></span>-->       
                <input type="password" name="rpwd" id="rpwd" class="txt"/> 
            </p>         
            <p><label style="font-size:13px;" id="psw_hint" class="hint" for="psw_hint"><span>*</span>Password should atleast contain 6 characters with Alphabet, Numeric and Underscores.</label></p>    
            <p><button type="submit" class="btn btn-success btn-md">Submit</button></p>  
            <?php if (isset($msg)) { ?>                  
                <p><?php echo $msg; ?></p>      
            <?php } ?>       
        </form>      
    </div>   
</div>

Jquery:

$('.btn-md').on('click', function () {
    alert('test');
   $('#formresetpwd').validate({
        rules: {
            pwd: {
                required: true,
                minlength: 6,
                LowserCase: true,
                Digit: true,
                Special_char: true
            }
        },
        messages: {
            pwd: {
                required: "password is required",
                minlength: "Enter atleast 6 characters"
            }
        },
    });
});
$.validator.addMethod("Uppercase", function (value, element) {
    return this.optional(element) || /[A-Z]/.test(value);
}, "Enter atleast one Capital letter");
$.validator.addMethod("LowserCase", function (value, element) {
    return this.optional(element) || /[a-z]/.test(value);
}, "Enter atleast one Small letter");
$.validator.addMethod("Digit", function (value, element) {
    return this.optional(element) || /[0-9]/.test(value);
}, "Enter atleast one Number");
$.validator.addMethod("Special_char", function (value, element) {
    return this.optional(element) || /[{}|~`"'[\]$&+,:;=?@#|'<>.^*()%!-]/.test(value);
}, "Enter atleast one Special Character");

提前致谢。

Answer 1

你必须设置输入元素class="pwd"

<input type="password" name="pwd" id="pwd" class="txt pwd"/>

Answer 2

您的代码...

$('.btn-md').on('click', function () {
   alert('test');
   $('#formresetpwd').validate({
       ....

While clicking the .btn-md button event fires and shows the alert that I've given. But the addmethod was not working.

根据您的代码，您单击按钮并触发 alert，然后调用 .validate() 方法。没有其他事情应该发生。

.validate()方法不用于触发验证；它仅用于初始化 表单上的插件。它不属于 click 处理程序。该插件已经捕获 submit 按钮的 click 并且自动触发任何必要的验证。

$(document).ready(function() {

    $('#formresetpwd').validate({  // <- INITIALIZE plugin
        rules: {
            ....
        },
        ....
    });

    $.validator.addMethod( ....

});

工作演示：jsfiddle.net/9vgpLmt5/

jQuery 验证器添加方法无效

jQuery Validator Add method not working

javascript

jquery

jquery-validate