Hi , I am currently working on multi-tab form validation.Total of 5 tabs to be filled by the user.
- When the user click "next" or "tab" button for navigation before finishing particular tab, the validation should be done.
- The Problem is that if the user filling "tab1" then he navigate to "tab4" without filling the "tab1", we should notify him to fill the previous tab.
- Currently i am validating only through , "next" button . But how to validate if the user move from "tab1" to "tab4" ....

the Following code has fulfilled these requirements if am adding another tab to this code its validating , but not showing the error message(This field is required.) . I am able to find where to put the condition and error message.

Code:
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/themes/black-tie/jquery-ui.css">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
</html>
<body>
<form class="cmxform" id="myForm" method="post" action="">
    <div id="tabs">
        <ul>
            <li><a href="#general">General</a></li>
            <li><a href="#tab2">Specifics</a></li>
        </ul>
        
        <div id="general">
            <label>First name</label>
            <input id="first" class="required" name="first" />
            <label>Last name</label>
            <input id="last" name="last" />
            <p>
                <a class="nexttab navbutton" href="#tab2"><span>Next</span></a>  
            </p>
        </div>
        <div id="tab2">
            <h2>Tab2</h2>
            <label>Middle name</label>
            <input id="middle" class="required" name="middle" />
            <p>
                <a class="nexttab navbutton" href="#general"><span>Prev</span></a>
                <a class="submit navbutton" id="submit" href="#"><span>Submit</span></a>
            </p>
        </div>
    </div>
</form>

<script>

//<![CDATA[ 
$(window).load(function(){
var validator = $("#myForm").validate();
var tabs = $("#tabs").tabs({
    select: function(event, ui) {
        var valid = true;
        var current = $(this).tabs("option", "selected");
        var panelId = $("#tabs ul a").eq(current).attr("href");
        
        $(panelId).find("input").each(function() {
            console.log(valid);
            if (!validator.element(this) && valid) {
                valid = false;
            }
        });
       
        return valid;
    }
});


$(".nexttab").click(function() {
        $("#tabs").tabs("select", this.hash);
});

//use link to submit form instead of button
$("a[id=submit]").click(function() {
    $(this).parents("form").submit();
});

//form validation


});//]]>  



</script>
</body>
</html>