Проверка jquery (с помощью плагина проверки jquery) - активация правил проверки для определенных элементов на основе нажатия кнопки

Question

Хорошо, я столкнулся с досадной проблемой.В своем исследовании я узнал, что использование validate () более одного раза не работает.Поэтому я настроил функцию, которая реагирует на нажатие определенных нажатых кнопок.Эти кнопки отправляют параметр, чтобы определить, какие элементы нужно проверить.Я делаю это, потому что я использую .fadeOut () /. FadeIn () для плавного перехода от раздела к разделу.Как только вы нажимаете кнопку первого раздела (которая приводит вас ко второму разделу), он проверяет элементы в первом разделе, если первый раздел считается «действительным», то он переходит к fadeOut / fadeIn в раздел b .... и т. Д.вкл.

Проблема в том, что, хотя я настроил правила и сообщения для разделов a и b, раздел b по-прежнему не проверяется.

Вот мой код -

  function validation(page) {
var rules;
var messages;
var validator;

if (page == 'secA') {
    rules = {
        /*gneral information validation*/
        gCompanyTxt: {
            required: true,
            minlength: 2
        }

    messages = {
        /*general info validator messages*/
        gCompanyTxt: {
            required: "The 'Company' text box is empty safgadfgad",
            minlength: "The 'Company' text box needs to have at least 2 characters"
        }
    };

    validator = new jQueryValidatorWrapper("form1", rules, messages);

} else if (page == 'secB') {
    rules = {
        txtFirst: {
            required: true,
            minlength: 2
        }
    };

    messages = {
        txtFirst: {
            required: "Your first name is required",
            minlength: "Your first name needs to be at least two characters"
        }
    };

    validator = new jQueryValidatorWrapper("form1", rules, messages);

}

if (!validator.validate()) {
    return;
} else {
    if (page == 'secA') {
        $('#secA').hide();
        $('#secB').fadeIn('slow');
    } else if (page == 'secTwo') {
        $('#secB').hide();
        $('#secC').fadeIn('slow');

    }
}
}

Кнопки такие:

 <button type = "button" class="buttonSale" id="btnA" onclick="validation('secA')">Proceed to Section B</button>

 <button type = "button" class="buttonSale" id="btnB" onclick="validation('secB')">Proceed to Section C</button>

В результате - при нажатии на «btnA» код работает эффективно, если что-то пустое или неправильное, проверка запускается иЯ могу это исправить, а затем двигаться дальше.Однако, как только я нахожусь в разделе b и нажимаю «btnB», он просто переходит на следующую страницу и, по-видимому, пропускает оператор if:

if (!validator.validate()) {
    return;
}

Я думаю, что здесь просто упущено что-то очень простое,но я устал смотреть на это и должен сосредоточиться на других вещах.Спасибо!

Answer 1

Использует ли это jQuery.Validate?Если это так, он будет проверять только элементы, видимые на экране, поэтому вам не нужно делать никакой специальной логики для изменения правил.Просто назначьте все свои правила сразу и убедитесь, что они игнорируют скрытые вводы.

Как только это будет сделано, вы можете связать событие нажатия на каждую кнопку, чтобы проверить состояние проверки формы, используя $(yourForm).validate().form() и перейти к следующей панели, если она вернется (верно).Последняя кнопка в вашем потоке должна на самом деле отправить.