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

279

14 января 2018, 03:19

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

Вот мой код:

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

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

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