Поля можно сделать обязательными и стандартный html атрибутом required, пример:
<input name="user" placeholder="Ваше имя" required>Если пользователь, что то не заполнит с данным атрибутом и нажмет на кнопку отправить форму, то увидит, примерно такое сообщение:
Это все круто, но передо мной в одном из проектов, нужно было сделать неактивной кнопку отправки, пока не будут заполнены все обязательные поля форм (для нескольких форм на странице). И т.к. на сайте был подключен jQuery, написал код проверки под него и решил им поделится с вами. И за одно написал его альтернативу на чистом JS.
Для примера накидаем 2 простенькие html форм:
HTML код форм
<form action="#" method="post" class="rp">
<label for="name1">Имя*:</label>
<input type="text" id="name1" class="rpole">
<label for="phone1">Телефон*:</label>
<input type="text" id="phone1" class="rpole">
<label for="clock1">Время для звонка:</label>
<input type="text1" id="clock">
<input type="submit" class="btn-submit disabled" value="Отправить">
</form>
<form action="#" method="post" class="rp">
<label for="name2">Имя*:</label>
<input type="text" id="name2" class="rpole">
<label for="email2">Email*:</label>
<input type="text" id="email2" class="rpole">
<label for="phone2">Телефон*:</label>
<input type="text" id="phone2" class="rpole">
<label for="text2">Текст:</label>
<input type="text" id="text2">
<input type="submit" class="btn-submit disabled" value="Отправить">
</form>Здесь к каждой форме (тегу form), которую нужно проверять назначен класс rp, и к input-там обязательным для заполнения (для проверки) присвоен класс rpole — т.е. мы будем проверять только поля с этим классом. И к кнопкам отправки присвоено по 2 класса btn-submit (для стилизации кнопки) и disabled (для скрипта).
CSS оформление форм
.rp label{font-size:13px;font-weight:700;color:#444;display:block}
.rp input{display:block;border:2px solid #cfcfcf;font-size:14px;color:#444;padding:7px 7px 8px;width:250px;margin-bottom:20px;transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s}
.rp input:focus{outline:none;border-color:#07a6e6}
.rp .btn-submit{border:none;width:180px;text-align:center;background:#07a6e6;font-size:13px;font-weight:700;color:#fff;cursor:pointer;height:35px;line-height:28px;padding:0}
.rp .btn-submit:hover{background:#009ac2}
.rp .btn-submit:active{box-shadow:inset 0 2px 2px rgba(0,0,0,0.2)}
.rp .btn-submit.disabled,.rp .btn-submit.disabled:hover{background:#afdde6;cursor:default}Стандартное оформление форм, объяснять по сути нечего.
jQuery скрипт
(function( $ ){
$(function() {
$('.rp').each(function(){
var form = $(this),
btn = form.find('.btn-submit');
form.find('.rpole').addClass('field-is-not-filled');
// Функция проверки полей формы
function checkInput(){
form.find('.rpole').each(function(){
if($(this).val() != ''){
$(this).removeClass('field-is-not-filled');
} else {
$(this).addClass('field-is-not-filled');
}
});
}
// Функция подсветки незаполненных полей
function lightEmpty(){
form.find('.field-is-not-filled').css({'border-color':'#d8512d'});
setTimeout(function(){
form.find('.field-is-not-filled').removeAttr('style');
},500);
}
setInterval(function(){
checkInput();
var sizeEmpty = form.find('.field-is-not-filled').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 );Скрипт с пояснениями и довольно простой.
Код скрипта на vanilla js
Если вы не используете в проекте jQuery и пишите все на чистом JS без зависимостей, тогда используйте следующий код:
(function() {
var rpForms = document.querySelectorAll('.rp');
rpForms.forEach(function(form) {
var btn = form.querySelector('.btn-submit');
var rpoleInputs = form.querySelectorAll('.rpole');
rpoleInputs.forEach(function(input) {
input.classList.add('field-is-not-filled');
});
function checkInput() {
rpoleInputs.forEach(function(input) {
if (input.value != '') {
input.classList.remove('field-is-not-filled');
} else {
input.classList.add('field-is-not-filled');
}
});
}
function lightEmpty() {
var emptyInputs = form.querySelectorAll('.field-is-not-filled');
emptyInputs.forEach(function(input) {
input.style.borderColor = '#d8512d';
});
setTimeout(function() {
emptyInputs.forEach(function(input) {
input.removeAttribute('style');
});
}, 500);
}
setInterval(function() {
checkInput();
var sizeEmpty = form.querySelectorAll('.field-is-not-filled').length;
if (sizeEmpty > 0) {
if (btn.classList.contains('disabled')) {
return false;
} else {
btn.classList.add('disabled');
}
} else {
btn.classList.remove('disabled');
}
}, 500);
btn.addEventListener('click', function() {
if (btn.classList.contains('disabled')) {
lightEmpty();
return false;
} else {
form.submit();
}
});
});
})();В итоге у вас должны получиться примерно такие формы:
У формы где заполнены все обязательные поля активная кнопка отправки, а в форме где не заполнены все обязательные поля кнопка отправки не активна.
Смотрите также:
Открытие внешних ссылок в новом окне при помощи jQuery.
Заключение
В отличии от аналогичных скриптов, которые я нашел в интернете, данный скрипт проверяет все формы на странице с присвоенным классом .rp и в этих формах проверяет только определенные поля к которым присвоен класс rpole.
Надеюсь Вам пригодится данный скромный скриптик в ваших проектах.
