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>
Всё!
перейти в Блог | Блог (стр. 6)
Ударим лайками по бездорожью, разгильдяйству и бюрократизму!
Ключевые слова (тэги): JavaScript 24 jQuery 19 web-программирование 91
Вам есть что сказать — ну я же чую.
Высказаться о наболевшем, я выслушаю-:
