Кнопка jQuery проверяет часть формы за раз

Извините, если я не ясно объяснил свою проблему.

У меня есть форма с несколькими таблицами для пользовательских входов.
Я использую кнопки next и back, чтобы скрыть и показать разные таблицы, чтобы вести пользователей.

Теперь проблема заключается в следующем: Как использовать кнопку next для проверки текущих активных входных таблиц? Например, каждый раз, когда пользователь нажимает next, он проверяет, заполнены ли все поля?

Вот сломанный DEMO. Спасибо за любые комментарии!

HTML

<form method="post" id="form1" action=index.html>
    <table>
        <H4 align="center" id="id_tab">
            |<a href="#" class="Chemical"> Chemical </a>|
             <a href="#" class="Crop"> Crop </a>|
             <a href="#" class="Physical"> Physical </a>|
            </H4>
    </table><br>
    <table class="tab tab_Chemical" border="0">
        <tr>
            <th><label for="id_wat_hl">Water Column Half life (days):</label></th>
            <td><input type="text" name="wat_hl" id="id_wat_hl" /></td>
        </tr>
    </table>
    <table class="tab tab_Crop" border="0" style="display:none">
        <tr>
            <th><label for="id_zero_height_ref">Zero Height Reference:</label></th>
            <td><input type="text" name="zero_height_ref" id="id_zero_height_ref" /></td>
        </tr>
    </table>
    <table class="tab tab_Physical" border="0" style="display:none">
        <tr>
            <th><label for="id_mas_tras_cof">Mass Transfer Coefficient (m/s):</label></th>
            <td><input type="text" name="mas_tras_cof" id="id_mas_tras_cof" /></td>
        </tr>
    </table>
    <table align="center">
        <tr>
            <td><input class="back" type="button" value="Back" /></td>
            <td><input class="next" type="button" value="Next" /></td>
            <td><input class="submit" type="submit" value="Submit" /></td>
        </tr>
    </table>
</form>

JS

$(document).ready(function() {
    var tab_pool = ["tab_Chemical", "tab_Crop", "tab_Physical"];
    var visible = $(".tab:visible").attr('class').split(" ")[1];
    var curr_ind = $.inArray(visible, tab_pool);
    $(".submit").hide();
    $(".back").hide();

    $('.next').click(function() {
        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();
        }
    });

    $('.back').click(function() {
        if (curr_ind > 0) {
            $(".tab:visible").hide();
            curr_ind = curr_ind - 1;
            $("." + tab_pool[curr_ind]).show();
            $(".submit").hide();
            $(".next").show();
        }
        if (curr_ind == 0) {
            $(".back").hide();
        }
    });
    $(".next").click(function() {
        $(".tab tab_Chemical").validate({
            rules: {
                wat_hl: "required"
            }
        })
    })
    $(".next").click(function() {
        $(".tab tab_Crop").validate({
            rules: {
                zero_height_ref: "required"
            }
        })
    })
    $(".next").click(function() {
        $(".tab tab_Physical").validate({
            rules: {
                mas_tras_cof: "required"
            }
        })
    })
});

Ответ 1

Добавьте подтверждение с помощью формы

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

Затем в обработчике next

$('.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();
    }
});

Демо: Fiddle

Объяснение

var valid = true: флаг для сохранения состояния вкладки через процесс итерации
$('input', tab).each: Итерировать через каждый элемент ввода на текущей вкладке
validator.element(v) проверить каждый элемент на вкладке
valid = validator.element(v) && valid: обновить состояние вкладки

Ответ 2

Как насчет этого?

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

Ответ 3

Вы вызываете метод проверки для каждой таблицы каждый раз при нажатии следующей кнопки. Вместо этого вы хотите только вызывать подтверждение, если таблица видна. Поскольку вы уже отслеживаете, какая таблица должна быть видимой с вашим curr_ind, я бы предложил использовать ее, чтобы узнать, какая таблица проверяет и только вызывает проверку для видимой таблицы.

Ответ 4

У меня есть реализация, чтобы получить тот же результат. Я добавил элементы div с параметром role = "form". И затем проверяет элементы на каждом div, поскольку это похоже на форму, в то время как основная форма все еще обтекает.

<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>

И этот код jQuery, чтобы проверить, есть ли какая-либо ошибка в конкретном div

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

Следующий код проверяет, есть ли какой-либо ввод ошибки, поднятый в определенном div

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

И если вы хотите проверить всю форму, просто используйте обычный код

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

Вот исходный файл на GitHub
Вот Демо-версия