jQuery — простейшая валидация формы

02.12.2017  10:19

Если у поля в форме есть аттрибут required="required", то jQuery по-умолчанию сам проверяет это поле на заполненность. Если нам надо это заблокировать и сделать свою проверку со своими какими-то действиями, то пишем простенький велосипед.

Функция обхода полей формы с проверкой на наличие аттрибута required и заполненности такого поля:
function validateForm(form){
	var err = false;
	$(form).find('input,textarea').each(function(){
		$(this).removeClass('error');
		if($(this).attr('required') == 'required' && ($(this).val() == '' || $(this).html() == '')){		
			$(this).addClass('error');
			err = true;
		}		
	});
	if (err == true) return false;
}


вызов повесим на клик, чтобы сработало до штатной проверки в jQuery:
$(document).ready(function(){ 
	//вызов
	$("#frmSubmit").click(function(e){
		return validateForm($("#frm"));
	});
});


Если вешать на submit формы, то не прокатит, проверка в jQuery отработает первой.

html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="validate_form.js"></script>
</head>
<style>
.error {border:1px solid red;}
</style>
<body>
<form action="#" id="frm">
<input type="text" placeholder="Имя" value="" required="required" class="name" /><br />
<input type="text" placeholder="Телефон" value="" class="tel-number" /><br />
<textarea placeholder="Текст" class="text" required="required"></textarea><br />
<input type="submit" value="Отправить" id="frmSubmit" />
</form>
</body>
</html>
Всё!


перейти в Блог

Ударим лайками по бездорожью, разгильдяйству и бюрократизму!


Ключевые слова (тэги): JavaScript 17  jQuery 10  web-программирование 41  

Вам есть что сказать — ну я же чую.
Высказаться о наболевшем, я выслушаю:
Имя


email (не публикуется)