Question

我正在使用awsAccordion上的jQuery Validation插件。我想在运行验证后没有错误地打开手风琴的下一个标签。

$('#myform').validate({ // initialize the plugin
    rules: {
        field1: {
            required: true,
            email: true
        },
        field2: {
            required: true,
            minlength: 5
        }
    },
    invalidHandler: function(form, validator){ //if there is error
        var errors = validator.numberOfInvalids();
        var message = (errors == 1) ? "One of your groups won't validate." : "Neither of your groups will validate.";
        alert(message);
        $('dt').unbind('click'); //if there is error remove click on the tab
    },
    submitHandler: function (form) { 
        alert('valid form submitted'); 
        return false;
        }
});

$('dt').click(
    function(e){
    $("#myform").valid();
});

问题是解除绑定点击$('dt').unbind('click');只有在关闭标签并打开下一个选项卡后才有效。你知道解决这个问题的方法吗？非常感谢！

Answer 1

您不必取消绑定click事件，而只需要停止传播并使用event.stopImmediatePropagation()阻止其余处理程序执行。并使用!$("#myform").valid()检查点击事件中表单的有效性。

尝试：

     $('dt').click(function(e){
       if(!$("#myform").valid()){ //Check if form is valid or not
           e.stopImmediatePropagation(); //stop rest of the handlers from being executed
       };
     });


     $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        },
        invalidHandler: function(form, validator){
            var errors = validator.numberOfInvalids();
            var message = (errors == 1) ? "Validated." : "Error! the field is required";
        },

        submitHandler: function (form) { 
            alert('valid form submitted'); 
        }
    });


    $("#accordion1").awsAccordion({
            type:"horizontal",
            cssAttrsHor:{
                ulWidth:"responsive",
                liWidth:50,
                liHeight:300
            },
            startSlide:1,
            openOnebyOne:true,
            classTab:"active",
            slideOn:"click",
            autoPlay:false,
            autoPlaySpeed:500
    });

<强> Demo

表格验证：如果有错误，请不要为手风琴设置动画

1 个答案: