Доброго времени суток!
Код проверяет заполненность формы, если по нажатию на "Отправить данные" поля ввода не заполнены их border окрашивается в красный цвет и отправить форму невозможно, до тех пор пока все поля не будут заполнены.(Смотрите код, ниже)
Проблем не возникает с версией JQUERY 1.8.1 c кодом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Простая проверка полей формы</title>
<style>
.form_box input {
display: block;
border: 2px solid #cfcfcf;
font-size: 14px;
color: #444444;
padding: 7px 7px 8px;
width: 250px;
margin-bottom: 20px;
transition: all 0.5s;
}
.form_box input:focus {
outline: none;
border-color: #07a6e6;
}
.form_box .btn_submit {
border: none;
width: 180px;
text-align: center;
background: #07a6e6;
font-size: 13px;
font-weight: bold;
color: #ffffff;
cursor: pointer;
height: 35px;
line-height: 28px;
padding: 0;
}
.form_box .btn_submit.disabled{
background: #afdde6;
cursor: default;
}
</style>
</head>
<body>
<div id="main">
<div class="form_box">
<form action="#" method="post" class="rf">
<input type="text" class="rfield" id="user_name" />
<input type="text" class="rfield" id="user_family" />
<input type="text" class="rfield" id="user_phone" />
<input type="submit" class="btn_submit disabled" value="Отправить данные" />
</form>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(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-color':'red'});
setTimeout(function(){
form.find('.empty_field').removeAttr('style');
},1000);
}
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')
}
},1000);
btn.click(function(){
if($(this).hasClass('disabled')){
lightEmpty();
return false
} else {
form.submit();
}
});
});
});
});
</script>
</body>
</html>
Как использовать выше предоставленный код с версией JQUERY 3.4.1?
Если заменить jquery(1.8.1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
на jquery(3.4.1) <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
То в консоле появится ошибка Uncaught TypeError: form.find(...).size is not a function и код перестаёт работать как работал на версии Jquery 1.8.1.
Как сделать чтобы этот код на Jquery 3.4.1 работал , также как и на Jqery 1.8.1?
Заранее спасибо!