голосование
PHP
Javascript
BASH
HTML
Firebird
Программы
Хостинг
Майнинг
Ресурсы
GIT
SEO
Oracle
Python
Проголосуйте за категорию!
счётчик
Яндекс.Метрика

Простая валидация для формы jquery

Эта очень неприятная тема для любого программиста. Чем больше полей в форме, тем больше и сложнее скрипт для валидации формы jquery. Были времена когда программисты делали валидацию на PHP. Подобная валидация довольно громоздко выглядела. Недостаток такой валидации PHP в том, что постоянно нужно использовать сессии или куки. В этом случае постоянно перегружается страница, что делает лишние запросы к базе данных.

Валидацию на jquery сделать намного проще. Существуют несколько плагинов jquery для проверки полей формы. Я покажу вам очень простой способ. Вы сможете его видоизменить и добавить свои фирменные проверки. Образно говоря, в один массив будут помещены ошибки. Затем этот массив превратится в сплошную строку. Вы увидите на выводе сразу несколько ошибок.

Вставьте следующий код в документ html. Обратите внимание на то, что у вас одна кнопка и 3 поля.


<style>
  form { margin:10px; border: 1px solid gray; }
  input { margin:5px; border: 1px solid gray; }
</style>  
<form name="test" method="get" action="api.php">
	<input type="text" name="title" value="" placeholder="Введите название"><br>
	<input type="text" name="text" value="" placeholder="Введите текст"><br>
	<input type="text" name="cat" value="" placeholder="Введите категорию"><br>
	<input type="submit" name="send" value="Отправить">
	<input type="reset" value="Очистить">
</form>

// validation form jquery
$("input[type='submit']").click(function (){	  
  // собираем данные в один массив
  var title = $("input[name='title']").val().trim();
  var text = $("input[name='text']").val().trim();
  var cat = $("input[name='cat']").val().trim();
  
  //обрабатываю данные
  var error_arr = [];
  if(title.length == 0) error_arr.push('описание');
  if(text.length == 0) error_arr.push('текст');
  if(cat.length == 0) error_arr.push('категорию');	  
  
  // проверка на наличие ошибок
  if(error_arr.length > 0){
	alert("Вы не заполнили следующие поля:\n" + error_arr.join(', '));
	// блокировка перехода на другую страницу
	return false;
  }else{
	console.log("Ошибок нет!");
  }  	  
});	

Давайте рассмотрим сам скрипт для валидации формы. Сначала собираются данные в переменные. Обязательно сделайте очистку данных от пробелов. " " - это тоже символ. Далее происходит проверка данных на наличие символов. Вы можете добавить свои фирменные проверки. Даже можете использовать регулярные выражения. Всё зависит от поставленной задачи. Затем происходит финальная проверка на наличие ошибок. Если есть хотя бы одна ошибка, то алерт выведет ошибку. Обратите внимание на join(). Эта функция собирает все элементы массива и выводит их в виде строки через разделитель. Читайте о массивах на странице массивы в javascript. Я не использую циклы и функцию each(). Так проще )). Если ошибок нет, то скрипт переместит вас на новую страницу и данные отправятся. В случае ошибки валидации перехода на другую страницу не будет. Вы увидите предупреждение и вывод всех ошибок (Вы не заполнили следующие поля: описание, текст, категорию).

До сих пор я использую эту схему. Она мне нравится своей простотой.

просмотры: 2238, уровень: лёгкий уровень, рейтинг: 3, дата: 2016-08-04 12:18:19
проголосовать:

Комментарии:






поиск
сайты друзей
банеры
домен RU всего за 99 рублей
http://www.2domains.ru домен RU домен RU всего за 99 рублей
http://ping-admin.ru/index_5659.html мониторинг сайтов сервис мониторинга работы сайта, мониторим HTTP, HTTPS, FTP, MYSQL, PostgreSQL, POP3, SMTP, IMAP
http://trainingweb.ru/redirect/well_web_vps_kvm Аренда VPS KVM в Европе Мы предлагаем в аренду VPS серверы с выделенным IP-адресом, которые полностью эмулируют физический сервер.