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

Excelent...the解决方案是这样的组合：

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

这将使当前选项卡的控件处于启用状态，而其他选项卡控件将被禁用，因此验证器将只验证选项卡中的当前元素。