Select a JQuery UI Tab after client validation

Question

I have Tab1, Tab2 and Tab3... All tabs have inputs that are validated ...

My save method validates the required inputs:

var validator = $("form").validate(); // obtain validator
var anyError = false;
$('#tabs').find(":input").each(function ()
{
    if (!validator.element(this)) { // validate every input element inside this step
        anyError = true;
    }
});
if (anyError)
    return false; // exit if any error found

//save ...

Its working fine... But I´d like to select the first Tab that has an "error"... How can I do that?

Thanks

Answer 1

Untested but could you not do this:

$('#tabs').find(":input").each(function ()
{
    if (!validator.element(this)) { // validate every input element inside this step
        anyError = true;
        // trigger click on the tab that is linked to $(this).parents('yourtabcontainername') here
        return false; // ends each
    }
});
if (anyError)
    return false; // exit if any error found

//save ...

Alternatively if you want all inputs to be checked regardless you could do something like this:

var validator = $("form").validate(); // obtain validator
var anyError = false;
var firstError;
$('#tabs').find(":input").each(function ()
{
    if (!validator.element(this)) { // validate every input element inside this step
        anyError = true;
        if(firstError === undefined){
            //set firstError to reference the tab that is linked to $(this).parents('yourtabcontainername')
        }
    }
});
if (anyError) {
        //trigger click on firstError
        return false; // exit if any error found
    }

//save ...

are either of those about what you are looking for?