jquery - jQuery表单验证冲突

Question

我正在使用 Jquery 表单验证库：

jquery-validate.js

当用户提交表单时，我向下滑动一个 div，该 div 有一个复选框，必须检查才能继续：

if(!$('#agreeConfirm').is(':checked')){

     alert('Please tick to agree to our terms and conditions');
     $('.termsAgree').slideDown();
     return true;

}

这很有效，因为没有提交表单，并且警报与显示复选框的 slideDown 一起显示。但是，如果用户未选择其中一个选择选项，则表单提交（尽管确实出现了“此字段是必需的”消息。如果我在上面注释掉我的行，则会观察到正确的行为。

我的验证码结构如下：

$("form#register").validate({

 rules:{

       name:{
           required: true,
           number: false
       },

       .....

       add1:{
       required: true
       }    

 }

});

$('form#register').submit(function(){

     ... 

     if(!$('#agreeConfirm').is(':checked')){

         alert('Please tick to agree to our terms and conditions');
         $('.termsAgree').slideDown();
         return false;

     }

}

提前致谢。

Answer 1

submit使用 jQuery Validate 插件时，您不应该使用完全独立的处理函数。这是多余的，也是你冲突的原因。该插件已经自动“处理”submit事件......

该插件有一个submitHandler回调函数，您可以将其用于在提交有效表单时需要完成的任何事情。

更像这样的东西...

$("form#register").validate({
     rules:{
        name:{
            required: true,
            number: false
        },

       .....

        add1:{
            required: true
        }
    },
    submitHandler: function(form) {
        // something to do when the form is valid
        if(!$('#agreeConfirm').is(':checked')){
            alert('Please tick to agree to our terms and conditions');
            $('.termsAgree').slideDown();
            form.submit();
        };
        return false;
    },
    invalidHandler: function(event, validator) {
        // something to do when validation fails
    }
});

查看所有回调选项：http: //jqueryvalidation.org/validate

Answer 2

您可以在字段的表单验证方法中为复选框添加规则。看这个。