Jquery validation multiple tabs, validate one at a time?

Question

I\'m new to jQuery and I\'m trying to use it and the validation plugin (http://docs.jquery.com/Plugins/Validation) to create a multi-part form with multiple tabs for differe

Answer 1

This is possible using the .element(selector) function of validator. What you're going to do is iterate through each element on the active tab and call that function on the input. This will trigger validation on each element in turn, showing the validation message.

$(".nexttab").click(function() {
    var valid = true;
    var i = 0;
    var $inputs = $(this).closest("div").find("input");

    $inputs.each(function() {
        if (!validator.element(this) && valid) {
            valid = false;
        }
    });

    if (valid) {
        $("#tabs").tabs("select", this.hash);
    }
});

Additionally, you'll probably want to run similar code when a user clicks a tab to go to a new set of inputs, instead of clicking "next".

Here's a working example: http://jsfiddle.net/c2y6r/

Update: Here's another way you could do it, canceling the select event upon invalid form elements:

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;
    }
});

However, now you have to consider allowing the user to go back when they've entered invalid data into the current page. On the other hand, you get the bonus of keeping all the validation code inside of one function which gets fired if the person clicks a tab or your next link.

Example: http://jsfiddle.net/c2y6r/1/

Update 2, if you want to allow people to navigate backwards through the tab interface:

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");

        if (ui.index > current) {

            $(panelId).find("input").each(function() {
                console.log(valid);
                if (!validator.element(this) && valid) {
                    valid = false;
                }
            });
        }

        return valid;
    }
});

Answer 2

The existing code didn't work for me (maybe it's dated) so i came up with the following. This example is assuming using jquery tabs and jquery validator.

$('#tabs').tabs(
{
    beforeActivate: function( event, ui )
    {   
        var valid = $("#myForm").valid();
        if (!valid) {
            validator.focusInvalid();
            return false;
        }
        else
            return true;
    }
});