[ACCEPTED]-Jquery validation multiple tabs, validate one at a time?-jquery-validate

Accepted answer

Score: 12

This is possible using the .element(selector) function of 19 validator. What you're going to do is iterate through 18 each element on the active tab and call 17 that function on the input. This will trigger 16 validation on each element in turn, showing 15 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 14 probably want to run similar code when a 13 user clicks a tab to go to a new set of 12 inputs, instead of clicking "next".

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

Update: Here's another way you 10 could do it, canceling the select event upon invalid 9 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 8 allowing the user to go back when they've 7 entered invalid data into the current page. On 6 the other hand, you get the bonus of keeping 5 all the validation code inside of one function 4 which gets fired if the person clicks a 3 tab or your next link.

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

Update 2, if you 2 want to allow people to navigate backwards 1 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;
    }
});

Score: 0

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

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

Source: stackoverflow.com

[ACCEPTED]-Jquery validation multiple tabs, validate one at a time?-jquery-validate

jquery validate plugin on dynamic form inputs not working

jQuery Validation plugin validating form on button click

jQuery Validate - Add Error Class to Parent Div

jQuery Validate stop form submit

jQuery Validation - get list of erroneous fields in invalidHandler

How can remove backslash in value by jQuery?

Bootstrap Tabs - Prevent scrolling to top

jQuery Validate plugin with multiple select boxes

Jquery validation for confirm password

How can we specify rules for jquery validation plugin by class?