Use jQuery Validation Engine with Tabs? - asp.net

Question

I have an ASP.NET web forms page that uses jQuery UI tabs. Within each tab there are sets of inputs, including a button that submits the inputs within the tab (using an AJAX call, but that's not relevant to this discussion).
I want to attach the jquery validation engine (https://github.com/posabsolute/jQuery-Validation-Engine) to only the subset of inputs that comprise the tab contents, however, because of the way ASP.NET web forms works, there is only a single form element and the validation engine must attach to a form.
Is there a simple way to tell this validation engine to include the currently visible tab/elements in the validation call?

Answer 1

Edit to the response:
What you are looking for is even easier!!! If you simply want to validate fields on the tab the user is currently on without restricting them to go to other tabs, then ignore the tabs beforeActivate part of the code I provided, and initialize your jQuery Validation Engine to ignore validating non-visible fields which is what they will be for all non-active tabs. Your code would look like this:
jQuery("#myForm").validationEngine('attach', {
promptPosition: "bottomLeft",
validationEventTrigger: "submit",
validateNonVisibleFields: false // this does the trick!
});
Here is the new JSFiddle to illustrate the example: http://jsfiddle.net/T7daH/
Cheers! :-)
------------------------------------------------------- Original Answer -----------------------------------------------------
There is actually a pretty straightforward way to implement the jQuery Validation Engine with a form that spans multiple tabs without having to programmatically trigger validation on each field or tab click.
If you have the following form that spans multiple tabs...
<form id="myForm" action="">
<div id="tabs">
<ul>
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
</ul>
<div id="tabs-1">
<input type="text" id="requiredFiled" name="requiredField" class="validate[required]" />
</div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
</div>
Then you set up the form and tabs like this:
jQuery("#myForm").validationEngine('attach', {
promptPosition: "bottomLeft",
validationEventTrigger: "submit",
validateNonVisibleFields: true,
updatePromptsPosition: true
});
$(function () {
$("#tabs").tabs({
beforeActivate: function (event, ui) {
if (!$("#myForm").validationEngine('validate')) {
event.preventDefault();
$('#myForm').validationEngine('hide');
setTimeout(function () {
$("#myForm").validationEngine('validate');
}, 450);
}
}
});
});
The result is that the user cannot select another tab if the tab the user is currently on is not fully valid. Here is the JSFiddle demo: http://jsfiddle.net/g9yLL/36/
Cheers! :-)

Answer 2

I had a website with a form with multi-tab and solved it using this:
$(document).ready(function(){}
$('#tab1').click(function(){
// #tab1 name of the tab / a href link inside that tab
var field1 = $("#field1").validationEngine('validate');
var field2 = $("#field2").validationEngine('validate');
if(field1 || sources )
{ // to show the error messages ;
return false;
}
});
$('#tab2').click(function(){
// #tab2 name of the tab / a href link inside that tab
var field1 = $("#field1").validationEngine('validate');
var field2 = $("#field2").validationEngine('validate');
if(field1 || field2 )
{ // to show the error messages ;
return false;
}
});
);
For more information check https://github.com/posabsolute/jQuery-Validation-Engine and search for field validation under validate heading.