Pavel_20
@Pavel_20

Как сделать, чтобы jquery validate корректно работал вместе с masked input?

Добрый день!
Есть форма с валидацией:
<form id="form">
        <input type="text" name="fio" class="promo__form-input" placeholder="ФИО*">
        <input type="tel" name="phone" class="promo__form-input" placeholder="+1 (999) 999 99 99 *">
        <input type="email" name="email" class="promo__form-input" placeholder="e-mail*">
        <label class="promo__form-agreement">
             <input class="check-box" type="checkbox" name="user-agreement">
             <span class="check-style"></span>
             Согласие на обработку <a href="#">персональных данных</a>*
         </label>
         <small class="promo__form-required">
                 * Обязательные поля для заполнения
          </small>
          <button class="promo__form-btn" type="submit" disabled>
                   Отправить
          </button>
</form>

function validateForms(form) {
    $(form).validate({
        rules: {
            fio: "required",
            phone: "required",
            email: {
                required: true,
                email: true,
            }
        },
        submitHandler: function () {
            $('.overlay, .popup-thanks').fadeIn('slow');
            $(this).find("input").val("");
            $('form').trigger('reset');
            $('.promo__form-input').removeClass('valid');
        },
    });
}

validateForms('#form');


$('form').submit(function (e) {
    e.preventDefault();

    $.ajax({
        type: "POST",
        url: "",
        data: $(this).serialize(),
    });
    return false;
});

$('input[name=phone]').mask("+1 (999) 999-99-99");
$('input[name=phone]').on('change', function () {
    if ($(this).val() == '') {
        $(this).removeClass('valid');
        $(this).addClass('error');
    } else {
        $(this).removeClass('error');
        $(this).addClass('valid');
    }
});


Когда ставлю фокус в поле с телефоном, ничего не ввожу или ввожу но не до конца и увожу фокус, к инпуту применяется класс .valid. Как сделать, чтобы такое не происходило?
  • Вопрос задан
  • 98 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы