jQuery Validate插件不应该提交的时间 [英] JQuery Validate plugin submitting when it shouldn't

问题描述

如果电子邮件无效，密码不符合最低要求或者密码和确认密码字段不匹配，我将尝试通过打印一条消息来验证我的表单.

I am trying to validate my form by printing out a message if the email is invalid, if the password does not meet minimum requirements or if the password and confirm password fields do not match.

为验证插件是否正常工作，我仅测试电子邮件的有效性.无论表单是否有效，验证器似乎都会在提交表单之前工作一秒钟，我似乎无法弄清楚原因.

To verify the plugin is working correctly, I am only testing for the validity of the email. The validator seems to be working for a second before the form is submitted regardless of whether the form is valid or not and I can't seem to figure out why.

此外，电子邮件无效"消息也没有被打印出来.

Also, the 'email isn't valid' message isn't being printed out.

很长一段时间以来，我一直在努力解决这个问题，对于任何建议，我都表示感谢.

I have been trying to figure this one out for quite some time and I appreciate any suggestions.

提前谢谢！

JavaScript:

JavaScript:

$('#signUpForm').validate({ // initialize the plugin
    errorPlacement: function(error, element) {},
    rules: {
        email: {
            required: true,
            email: true
        }
    }
});

$('#signUpForm').submit(function(e){
    e.preventDefault();
    if($(this).valid()){
        $(this).submit();
    }else{
        return false;
    }           
});

表格:

<form id="signUpForm" method="post" action="signup.php">
    <input id="signUpEmail" name="email" class="form-control"> 
    <input id="signUpPassword" name="password" class="form-control" type="password"> 
    <input id="confirmPassword" name="confirmPassword" class="form-control" type="password"> 
</form>

推荐答案

此配置完全错误...

This configuration is all wrong...

$('#signUpForm').validate({ // initialize the plugin
    ....
});

$('#signUpForm').submit(function(e){
    ....     
});

您的.submit()处理程序是完全多余的，并且完全干扰了jQuery Validate插件的正确操作，该插件会自动捕获按钮click并已经阻止了submit事件.

Your .submit() handler is totally redundant and totally interfering with the proper operation of the jQuery Validate plugin, which automatically captures the button click and blocks the submit event already.

换句话说，.submit()处理程序中的代码在功能上与插件已经为您完成的功能相同.您不需要它，它正在破坏验证.

In other words, the code within your .submit() handler is functionally identical to what the plugin is already doing for you. You don't need it and it's breaking validation.

您的errorPlacment回调函数为空，因此将阻止显示所有错误消息...

Your errorPlacment callback function is empty so that's going to stop all error messages from displaying...

errorPlacement: function(error, element) {},

---

它应该看起来像这样...

---

It should simply look something like this...

$('#signUpForm').validate({ // initialize the plugin
    rules: {
        email: {
            required: true,
            email: true
        },
        password: {
            required: true,
            minlength: 8,
            maxlength: 12
        },
        confirmPassword: {
            equalTo: '#signUpPassword'
        }
    }
});

演示: http://jsfiddle.net/2t7dbuuf/

DEMO: http://jsfiddle.net/2t7dbuuf/

请参考文档和 查看全文