Имеется 2 условия для проверки валидации формы, одна проверяет на пустоту поля, другая выдает ошибки если заполнено,что-то не верно, как их соединить?
(function( $ ){
$(function() {
$('.rf').each(function(){
// Объявляем переменные (форма и кнопка отправки)
var form = $(this),
btn = form.find('.btn_submit');
// Добавляем каждому проверяемому полю, указание что поле пустое
form.find('.rfield').addClass('empty_field');
// Функция проверки полей формы
function checkInput(){
form.find('.rfield').each(function(){
if($(this).val() != ''){
// Если поле не пустое удаляем класс-указание
$(this).removeClass('empty_field');
} else {
// Если поле пустое добавляем класс-указание
$(this).addClass('empty_field');
}
});
}
// Функция подсветки незаполненных полей
function lightEmpty(){
form.find('.empty_field').css({'border':'solid 0.5px #bf1820'});
form.find('.empty_field').css({'background':'#fff url(./images/invalid.png) no-repeat 98% center'});
form.find('.empty_field').css({'box-shadow':'0 1px 5px 0 rgba(191, 24, 32, 0.3)'});
// Через полсекунды удаляем подсветку
setTimeout(function(){
form.find('.empty_field').removeAttr('style');
},4000);
}
// Проверка в режиме реального времени
setInterval(function(){
// Запускаем функцию проверки полей на заполненность
checkInput();
// Считаем к-во незаполненных полей
var sizeEmpty = form.find('.empty_field').size();
// Вешаем условие-тригер на кнопку отправки формы
if(sizeEmpty > 0){
if(btn.hasClass('disabled')){
return false
} else {
btn.addClass('disabled')
}
} else {
btn.removeClass('disabled')
}
},500);
// Событие клика по кнопке отправить
btn.click(function(){
if($(this).hasClass('disabled')){
// подсвечиваем незаполненные поля и форму не отправляем, если есть незаполненные поля
lightEmpty();
return false
} else {
// Все хорошо, все заполнено, отправляем форму
form.submit();
}
});
});
});
})( jQuery );
$(document).ready(function(){
$("#someform").validate({
rules:{
name:{
required: true,
},
phone:{
number: true,
minlength: 6,
},
email:{
required:true
}
},
messages:{
name:{
required: "Please enter your information in the field above.",
},
phone:{
required: "Please use the number starting with 10",
},
email:{
required:"Please use the valid email address"
},
}
});
});
сама форма
<form novalidate id="someform" method="post" name="someform" class="rf">
<input autofocus="" placeholder="Your name" type="text" name="name" class="rfield">
<input placeholder="Phone-number" type="text" class="rfield" name="phone">
<input placeholder="Email" type="email" class="rfield" name="email">
<input class="btn_submit disabled" rel="reg_form" type="submit" value="request call">
</form>
Простой