选项卡中的jQuery验证仅适用于首次提交

时间:2012-11-02 10:25:50

标签: jquery jquery-validate jquery-tabs

我正在尝试解决我需要隐藏在标签后面的表单字段的问题。

我已设法使这一半工作,以便当您单击提交按钮任何所需+隐藏字段时,它将自动显示此选项卡。

但问题是当你: 1.加载页面,单击“提交”,这样可以正常工作。 2.返回第一个选项卡,再次单击提交,没有任何反应。

http://jsfiddle.net/3xEch/

// Form validator
var theForms = $("form[method=post]:not(.noValidate)");
if (theForms.length){
    theForms.each(function(){
        var $dis = $(this);

        if($dis.hasClass("validateHidden")){
            jQuery.validator.setDefaults({
                ignore: ''
            });
        }

        validater = $dis.validate({
            errorPlacement: function(error, element) {
                var trigger = element.next('.ui-datepicker-trigger, .input-label');
                if(!trigger.length){ trigger = element.parent('label'); }
                var labelWidth = element.parent("p").not(".full").find("label").eq(0).width();
                error.insertAfter(trigger.length > 0 ? trigger : element)
                     .css("marginLeft", labelWidth);

                // Check if hidden inside tab
                if(element.parents(".tab").is(":hidden")){
                    var tabs = element.parents(".tabs");
                    tabs.find(".tab").hide();
                    var tab = $("#"+element.parents(".tab").attr("id"));
                    tab.show();
                    tabs.find(".tabmenu li").removeClass("selected");
                    tabs.find(".tabmenu li").eq(tab.index()-1).addClass("selected");
                }
            }
        });

        $('.tabs').bind('tabsselect', function(){
            validater.resetForm();
        });
    });
}

2 个答案:

答案 0 :(得分:3)

问题是由于errorPlacement仅对每个经过验证的元素调用一次。

请参阅此问题:jQuery Validation Plugin: Invoke errorPlacement function when onfocusout, keyup and click

他们建议使用showErrors方法进行任何重复验证。

答案 1 :(得分:1)

而不是在$(document).ready()上运行此代码 - 每当显示第一个标签时运行此代码?我猜测代码在第一次之后不起作用,因为事件被绑定到单击另一个选项卡时清除的HTML元素。