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

32
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');
        }
    });
});
READ ALSO
Выборка из MySQL драйвер PDO

Выборка из MySQL драйвер PDO

ЗдравствуйтеНедавно начал изучать PDO Mysql

29
Сумма постов категорий с учетом всех вложенных категорий

Сумма постов категорий с учетом всех вложенных категорий

Хочу на сайте в разделе вывести подразделы с количеством постов в каждом

48
Не отображается форма в потоке

Не отображается форма в потоке

Добрый день всемИмеем красивенькую форму прогресса загрузки данных

31
ZedGraph изменение цвета линейки на осях

ZedGraph изменение цвета линейки на осях

Как изменить цвет линейки на осях? Сам бордюр меняется, а вот риски линейки так и остаются чёрными

44