Use jQuery Validation Engine with Tabs?

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><a href="#tabs-1">Tab 1</a>

        </li>
        <li><a href="#tabs-2">Tab 2</a>

        </li>
        <li><a href="#tabs-3">Tab 3</a>

        </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! :-)

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.