Здравствуйте, знаю что тема избита и в интернете узнал что не стоит присваивать имя "submit" для отправки, но это не помогает, валидация успешно работает, однако форма не отправляется, в консоле такая ошибка (valid.js:40 Uncaught TypeError: form.find(...).size is not a function(…)).
Помогите кто знает. Спасибо.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/valid.js"></script>
<title>Авторизация</title>
</head>
<body>
<div>
<div style = "margin: 50px auto; width: 200px;" class = "inner_color">
<form id="loginform" action="testlogin.php" method="post" class="rf">
<div class = "container">
<div>
<label class = "title">Логин</label><br>
<input type = "text" name="login" class="rfield">
</div>
</div>
<!-------------------------------------------------->
<div class = "container">
<label class = "title">Пароль</label><br>
<input type = "text" name="password" class="rfield">
</div>
<input type="submit" class="button btn_submit disabled" value="Войти" />
</form>
<form action="registr.php" method="post">
<input type="submit" name="registr" class="button" value="Регистрация" />
</form>
<div class = "container">
<label class = "title"><? echo $_GET['alert']; ?></label>
</div>
</div>
</div>
</body>
</html>
valid.js
(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':'#d8512d'});
// Через полсекунды удаляем подсветку
setTimeout(function(){
form.find('.empty_field').removeAttr('style');
},500);
}
// Проверка в режиме реального времени
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 );
