Добрый день!
Есть форма с валидацией:
<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. Как сделать, чтобы такое не происходило?