CODEWITHSUNDEEP
jqueryvalidationtabs
Prithivi
Prithivi

Reputation: 73

jQuery validating all tabs on form submit

Currently jQuery validation plugin, validates only selected tab. So to make all the tabs to be validated i introduced ignore attribute 

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

But after giving this it validates even the hidden fields. Is there a way to validate fields on all tabs by ignoring only hidden fields on each tabs.

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"

});
})

Upvotes: 2

Views: 5257

Answers (2)

Vinfo
Vinfo

Reputation: 56

Excelent...the solution was the combination:

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

more...

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

Upvotes: 4

Abdul Munim
Abdul Munim

Reputation: 19217

You need to make the other controls disabled.

Try this:

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

This will keep the current tab's control enabled and other tabs control disabled and thus the validator will validate the current elements in the tab only.

Upvotes: 0

Related Questions