Валидация полей при нажатии клавиши и блокировка кнопки
Суть скрипта, это при нажатии кнопки (keyup) проверить правильность их заполнения + если один из элементов имеет класс (error) то кнопка отправить становится неактивной Проблема в том, что приходится лишние кнопки на клавиатуре нажимать, что бы событие сработало, как этот скрипт сделать более корректным?
Код страницы:
<div class="modal-title">Ваши данные</div>
<div class="modal-buy-form-phone">
<input type="text" class="cart-input cart-input_block" data-field="receiverAppartment" id="zakazYouName">
<label for="js-cart_get_appartment" class="cart-label_moved">Ваше имя</label>
<div class="error-box"></div>
</div>
<div class="modal-buy-form-phone">
<input type="tel" class="cart-input cart-input_block" data-field="customerPhone" placeholder="+7 777 000 00 00" value="" id="zakazYouPhone">
<label class="cart-label_transformed" for="js-cart_send_phone">Ваш телефон <i>*</i></label>
<div class="error-box"></div>
</div>
<button id='add-shop-button' disabled="disabled" onclick="sendZakaz(<?=$item['id']; ?>);" class="modal-send-button">Перейти к оплате</button>
Код Jquery:
$( document ).ready(function() {
$('.setimg').click(function() {
$('#bigimg').attr('src', ($(this).attr('src')));
})
$('#zakazYouName, #zakazYouMail').on("keyup", function(){
if($("#zakazYouName").hasClass("not-error")) {
if($("#zakazYouMail").hasClass("not-error")) {
$("#add-shop-button").removeAttr('disabled');
$("#add-shop-button").removeClass('error').addClass('not-error');
}
}
if($("#zakazYouName, #zakazYouMail").hasClass("error")) {
$("#add-shop-button").attr('disabled', true);
$("#add-shop-button").removeClass('not-error').addClass('error');
}
if($("#zakazYouMail").hasClass("error")) {
$("#add-shop-button").attr('disabled', true);
$("#add-shop-button").removeClass('not-error').addClass('error');
}
var id = $(this).attr('id');
var val = $(this).val();
switch(id)
{
// Проверка поля "Имя"
case 'zakazYouName':
var rv_name = /^[a-zA-Zа-яА-Я]+$/;
if(val.length > 2 && val != '' && rv_name.test(val))
{
$(this).removeClass('error').addClass('not-error');
$(this).next('.error-box').text('Принято')
.css('color','green')
.animate({'paddingLeft':'10px'},400)
.animate({'paddingLeft':'5px'},400);
}
else
{
$(this).removeClass('not-error').addClass('error');
$(this).next('.error-box').html('поле "Имя" обязательно для заполнения<br>, длина имени должна составлять не менее 2 символов<br>, поле должно содержать только русские или латинские буквы')
.css('color','red')
.animate({'paddingLeft':'10px'},400)
.animate({'paddingLeft':'5px'},400);
}
break;
case 'zakazYouMail':
var rv_email = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
if(val != '' && rv_email.test(val))
{
$(this).removeClass('error').addClass('not-error');
$(this).next('.error-box').text('Принято')
.css('color','green')
.animate({'paddingLeft':'10px'},400)
.animate({'paddingLeft':'5px'},400);
}
else
{
$(this).removeClass('not_error').addClass('error');
$(this).next('.error-box').html('поле "Email" обязательно для заполнения<br>, поле должно содержать правильный email-адрес<br>')
.css('color','red')
.animate({'paddingLeft':'10px'},400)
.animate({'paddingLeft':'5px'},400);
}
break;
}
});
});