jQuery button validate part of a form at a time

Question

Sorry if I did not explain my problem clearly.

1. I have a form with multiple tables for users inputs.
2. I use next and back bu

Answer 1

You are calling the validate method for each table every time the next button is clicked. Instead, you only want to call validate if the table is visible. Since you are already tracking which table should be visible with your curr_ind, I'd suggest using it to know which table to validate and only calling validate for the visible table.

Answer 2

What about this ?

var isOpenedTabValid = $(".tab:visible :input").valid();

Answer 3

Add validation using the form

var validator = $('form').validate({
    ignore: 'input[type="button"],input[type="submit"]',
    rules: {
        wat_hl: {
            required: true
        },
        zero_height_ref: {
            required : true
        },
        mas_tras_cof: {
            required: true
        }
    }
});

Then in the next handler

$('.next').click(function () {
    var tab = $(".tab:visible");

    var valid = true;
    $('input', tab).each(function(i, v){
        valid = validator.element(v) && valid;
    });

    if(!valid){
        return;
    }

    if (curr_ind < 2) {
        $(".tab:visible").hide();
        curr_ind = curr_ind + 1;
        $("." + tab_pool[curr_ind]).show();
        $(".submit").hide();
        $(".back").show();
    }
    if (curr_ind == 2) {
        $(".submit").show();
        $(".next").hide();
    }
});

Demo: Fiddle

Explanation

1. var valid = true: a flag to keep the state of the tab through the iteration process
2. $('input', tab).each: Iterate through each inputs element in the current tab
3. validator.element(v) validate each element in the tab
4. valid = validator.element(v) && valid: update the state of the tab

Answer 4

I have an implementation to get this same result. I have added div elements with role="form" parameter. And then validates elements on each div as it is like a form while the main form is still wrapping around.

<form action="#" id="myForm" role="form" data-toggle="validator" method="post">

    <div id="form-step-0" role="form" data-toggle="validator"><!-- Input elemets --></div>
    <div id="form-step-1" role="form" data-toggle="validator"><!-- Input elemets --></div>
    <div id="form-step-2" role="form" data-toggle="validator"><!-- Input elemets --></div>

</form>

And this jQuery code to check if there is any error in a particular div

var elmForm = $("#form-step-0");
elmForm.validator('validate'); 

The following code will check if there is any error input raised in a particular div

var elmErr = elmForm.children('.has-error');
if(elmErr && elmErr.length > 0){
    // Error elements found, Form validation failed
    return false;    
}

And when you want to validate the whole form just use the normal code

var elmForm = $("#myForm");
elmForm.validator('validate'); 
var elmErr = elmForm.find('.has-error');
if(elmErr && elmErr.length > 0){
    alert('Oops we still have error in the form');
    return false;    
}else{
    alert('Great! we are ready to submit form');
    elmForm.submit();
    return false;
}                

Here is the source file on GitHub
Here is a Demo implemeation