1

Как правильно отследить валидацию формы?

Вот мой код:

<form class="form__action" action="">
  <div class="form__user-name">
    <label class="form__label">Ваше имя:</label>
    <input type="text" class="form__input js-type-user" />
  </div>
  <div class="form__user-mail">
    <label class="form__label">Email:</label>
    <input type="email" class="form__input js-type-email" />
  </div>
  <div class="form__user-password">
    <label class="form__label">Придумайте пароль:</label>
    <input type="password" class="form__input js-type-pass" />
  </div>
  <input type="checkbox" class="form__check" checked/>
  <label class="form__text">Регистрируясь, вы подтверждаете, что вам уже исполнилось <br/>
                        18 лет и вы ознакомились с условиями пользования сайтом.
                    </label>
  <div class="page__transition page__transition-blue">
    <button type="submit" class="btn btn-blue btn-blue-disabled">продолжить</button>
  </div>
</form>

У меня есть проверка на каждый <input> сделанная через JavaScript.
Как сделать, что бы когда все <input> прошли валидацию?
Убрать класс с кнопки btn-blue-disabled, что бы кнопка сразу среагировала, когда верно заполнены <input>?

Разобрались с кнопкой, теперь возникла другая проблема, вот мой код валидации <input> на имя:

var userName = document.querySelector(".js-type-user");
    var letterOnly = /^([a-zа-яё]+|)$/i;
    userName.onchange = function () {
        if (letterOnly.test(this.value)) {
            isValidateUser = true;
        }
    };

Проблема в следующем: меняется isValidateUser на true и все работает, но когда я даже стираю в <input> все буквы, isValidateUser все равно остается true, пробовал добавить:

if(this.value == ""){
            isValidateUser = false;
        }

Но безрезультатно. В чем может крыться проблема?

2
  • вашу проверку напишите в вопросе 12 янв 2018 в 17:20
  • К первому if допишите else и поставьте значение переменной false
    – Peresada
    13 янв 2018 в 6:42

1 ответ 1

1

Можно так. Но советую все-таки полагаться ТОЛЬКО на серверную валидацию через аякс, ибо манипулировать с браузером очень просто.

Общий принцип простой: у вас есть "глобальная" переменная, которая меняется в зависимости от валидаций ваших инпутов. И если изначально эта переменная была true (то есть позволяла отправить форму - или наоборот, как удобно), то если в каком-то инпуте валидация не пройдет, эта переменная поменяется на false. Далее делаем проверку на переменную после нескольких ивентов с формой. НО я бы не назвал этот способ классным, потому что он грузит браузер пользователя.

$(document).ready(function() {
    var isFormValid = true;

    function validateForm() {
        // в этой части все ваши валидации инпутов. Если инпут валидацию не проходит, ставите isFormValid = false;

        // пример валидация email
        if(!/(.*)@(.*)\.(.*)/.test($('#email').val())) isFormValid = false;
    }
    // в принципе эта функция validateForm не нужна, тут она присутствует для примера. Менять переменную isFormValid вы можете в ваших валидациях

    $('.form__action').on('change focus blur keydown keyup mouseenter mouseleave', function() {
        // на практически любом взаимодействии с формой проверяем валидность
        validateForm();
        if (isFormValid == true) {
            $('.btn').removeClass('btn-blue-disabled');
        } else {
            $('.btn').addClass('btn-blue-disabled');
        }
    });
});
1
  • Огромное спасибо, понял в каком направлении двигаться! У меня еще один маленький вопрос по поводу валидации через сервер. Как его правильно организовать? Можно вот эти переменные isFormValid поместить в какой-то JSON файлик и оттуда проверять? Извините, если вопрос глупый, просто не совсем в этом разбираюсь. Спасибо!
    – Aleksander
    12 янв 2018 в 18:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.