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>
Всё!

Здравствуйте! Я — Андрей Панёвин и занимаюсь профессиональной разработкой сайтов на платформе 1С-Битрикс (исключительно программирование).
Есть вопросы по статье? Могу подсказать и помочь по скайпу (andrey.panevin.ru), WhatsApp (+7-911-091-0670) или перепиской в ВК.
1000 р./час.
1000 р./час.

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