表单验证:如果有错误，不要't使手风琴动起来

Form validation: if there is errors don't animate the accordion

本文关键字：动起来 手风琴 不要 验证 如果 有错误 表单      更新时间：2023-11-25

我在awsAccordion上使用jQuery Validation插件。我想在验证运行无错误后打开手风琴的下一个选项卡。

我就是这么做的：http://jsfiddle.net/vqL4p/7/

$('#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');才能工作。你知道解决这个问题的方法吗
非常感谢！

您不必解除click事件的绑定，只需要停止传播并阻止其他处理程序使用event.stopImmediatePropagation（）执行。然后使用!$("#myform").valid()检查click事件中表单的有效性。

尝试：

     $('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
    });

演示

相关文章：