jQuery验证表单提交上的所有选项卡

Question

目前的 jQuery 验证插件，仅验证选定的选项卡。因此，为了使所有选项卡都得到验证，我引入了忽略属性

$("form").validate({
....
 ....
ignore:"ui-tabs-hide"
});

但是在给出这个之后，它甚至可以验证隐藏的字段。有没有办法通过仅忽略每个选项卡上的隐藏字段来验证所有选项卡上的字段。

html

<div id="tabs">
<%@include file="inc/tabsList.jsp" %> <!--has <a> link for each div -->

<div id="fragment-1"><%@include file="inc/tradeDetails.jsp" %></div>
<div id="fragment-2"><%@include file="inc/beneficiaryDetails.jsp" %></div>
<div id="fragment-3"><%@include file="inc/referenceDetails.jsp" %></div>
<div id="fragment-4"><%@include file="inc/summary.jsp"%></div>

<div class="clear"></div>

</div>

JavaScript

$(function() {
var hiddenChevron;  
var $tabs = $('#tabs').tabs();

$("#fWdErrors_940").hide();

$("#singleSpotForm").validate({
        rules: {
            'singleSpotRequestVO.entity.entityName' : "required",
            'singleSpotRequestVO.subEntity.entityName' : "required",                
            'singleSpotRequestVO.transactionType' : "required",
            'singleSpotRequestVO.tradeCurrencyId' : "required"
        },
        errorContainer: 'fWdErrors_940',
        errorClass: "errorMsgItemText",
        errorPlacement: function(error, element) {              
             error.appendTo( element.parent("td").last() );
        },
        invalidHandler: function(form, validator) {
            var errors = validator.numberOfInvalids();
            if(errors){
                var message = validator.numberOfInvalids() == 1 ?
                        validator.numberOfInvalids() + " error " :
                        validator.numberOfInvalids() + " errors ";  
                $(".failureErrCount").html( message );
                $("#fWdErrors_940").show().focus(); 
            }else{
                $("#fWdErrors_940").hide(); 
            }

        },
        onkeyup : false,
        ignore: "ui-tabs-hide"

});
})

Answer 1

非常好...解决方案是组合：

$("form").validate({
....
 ....
ignore:"ui-tabs-hide"
});

更多...

$("div[id^=fragment-]").bind("click", function() {
   $("div[id^=fragment-]").children("input, select, textarea").prop("disabled", true);
   $(this).children("input, select, textarea").prop("disabled", false);
});

Answer 2

您需要禁用其他控件。

试试这个：

$("div[id^=fragment-]").bind("click", function() {
   $("div[id^=fragment-]").children("input, select, textarea").prop("disabled", true);
   $(this).children("input, select, textarea").prop("disabled", false);
});

这将使当前选项卡的控件保持启用状态并禁用其他选项卡控件，因此验证器将仅验证选项卡中的当前元素。