API tools faq
paste
Advertisement
Guest User

HTML form validation

a guest
Apr 25th, 2018
188
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 7.76 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.   <head>
  5.       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.  
  7.       <style type="text/css">
  8.           .validation-error {
  9.               background: #ff9999 !important;
  10.           }
  11.           .err-msg {
  12.               color: red;
  13.           }
  14.       </style>
  15.  
  16.       <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
  17.  
  18.       <script type="text/javascript">
  19.  
  20.           /**
  21.            * Модуль типовых валидаторов.
  22.            * Если норм - возвращают false, если ошибка - сообщение об ошибке.
  23.            */
  24.           var Validators = (function () {
  25.  
  26.             //Ниже - функции, которые принимают настроечные параметры и возвращают собственно функции валидации.
  27.  
  28.             /** Число. Больше или равно */
  29.             function gte(compareVal, message) {
  30.               if (!message) message = "Должно быть больше или равно " + compareVal;
  31.               return function (val) {
  32.                 var res = +val >= compareVal; //Здесь '+' это быстрая конвертация строки в число
  33.                 if (!res) {
  34.                   return message;
  35.                 } else {
  36.                   return false;
  37.                 }
  38.               }
  39.             }
  40.  
  41.             /** Строка. Cоответствие рег. выражению */
  42.             function regexp(regexpStr, message) {
  43.               if (!message) message = "Не соответствует образцу: " + regexpStr;
  44.               var re = new RegExp(regexpStr);
  45.               return function (val) {
  46.                 if (!re.test(val)) {
  47.                   return message;
  48.                 } else {
  49.                   return false;
  50.                 }
  51.               }
  52.             }
  53.  
  54.             /** Непустое значение */
  55.             function notEmpty(message) {
  56.               if (!message) message = "Значение не должно быть пустым";
  57.               return function (val) {
  58.                 var res = val && val.length && true;
  59.                 if (!res) {
  60.                   return message;
  61.                 } else {
  62.                   return false;
  63.                 }
  64.               }
  65.             }
  66.  
  67.             //Возвращаем публичные функции, которые будут видны снаружи
  68.             return {
  69.               notEmpty: notEmpty,
  70.               gte: gte,
  71.               regexp: regexp
  72.             }
  73.  
  74.           }()); //Функция вызывается сразу после определения. Так создаётся объект-модуль. Google 'js module pattern' или 'IIF'.
  75.  
  76.           //Имя класса : Массив валидаторов
  77.           var formValidators = {
  78.             'some-number': [Validators.gte(100)],
  79.             'some-text'  : [Validators.notEmpty('Введи текст'), Validators.regexp('^((?!(хуй|пизда)).)*$', 'Не ругайся, блядь!')],
  80.             'some-color' : [Validators.notEmpty('Выбери цвет')]
  81.           };
  82.  
  83.           /**
  84.            * Имя валидатора должно быть прописано в аттрибуте 'data-validator'
  85.            */
  86.           function validateElement(elt) {
  87.             var err = false;
  88.             var $elt = $(elt); //Оборачиваем элемент в jQuery
  89.             var vldName = $elt.data('validator'); //Получаем имя валидатора из атрибута 'data-validator'
  90.             if (vldName) {
  91.               var vlds = formValidators[vldName];
  92.               if (vlds) {
  93.                 for (var i=0; i < vlds.length; i++) {
  94.                   var vld = vlds[i];
  95.                   var res = vld($elt.val()); //Вызываем валидатор, передаём в него value элемента
  96.                   if (res) {
  97.                     $elt.addClass('validation-error').siblings('.err-msg').text(res);
  98.                     if (res && !err) err = true;
  99.                   }
  100.                 }
  101.               }
  102.             }
  103.             return err;
  104.           }
  105.  
  106.           /**
  107.            * Элементы, которые нужно проверять, должны иметь класс 'validate'.
  108.            * Так можно проверять не только input, но и select, например.
  109.            *
  110.            * Возвращает true если норм. или false если ошибка.
  111.            */
  112.           function validateForm($frm) {
  113.             var err = false;
  114.             //В имени переменной префикс '$' не обязателен, он просто чтобы было понятно, что это jQuery-объект
  115.             //Находим все элементы внутри формы с классом 'validate',
  116.             //убираем у них класс ошибки  и очищаем сообщение, а потом проходим по ним
  117.             var $elts = $frm.find('.validate');
  118.             $elts.removeClass('validation-error').siblings('.err-msg').text('');
  119.             $elts.each(function () {
  120.               var res = validateElement(this); //Здесь this указывает на сам элемент (особенность jQuery)
  121.               if (res && !err) err = true;
  122.             });
  123.             return !err;
  124.           }
  125.  
  126.           //Этот код будет выполнен после полной загрузки DOM
  127.           $(function () {
  128.  
  129.             //Привязка обработчика к кнопке
  130.             $('#btn-test').on('click', function (evt) {
  131.               var $frm = $('#my-form'); //Находим форму.
  132.               var ok = validateForm($frm);
  133.               if (ok) {
  134.                 //$frm[0].submit(); //Отправка формы ($frm[0] - это значит достать форму из обёртки jQuery (как из массива))
  135.                 alert("Всё нормально");
  136.               }
  137.             });
  138.  
  139.             //Очистка ошибки при фокусе на элементе
  140.             $('.validate').on('focus', function (evt) {
  141.               //Здесь this указывает на сам элемент (особенность jQuery)
  142.               //Далее - оборачиваем элемент в jQuery и убираем класс ошибки и очищаем сообщение
  143.               $(this).removeClass('validation-error').siblings('.err-msg').text('');
  144.             });
  145.  
  146.           });
  147.  
  148.       </script>
  149.   </head>
  150.   <body>
  151.   <h2>Валидация формы</h2>
  152.   <form id="my-form" onsubmit="return false"> <!-- Блокируем автоматический submit -->
  153.       <div>
  154.           Текст (без мата): <input class="validate" type="text" name="some_text" data-validator="some-text"/>
  155.           <span class="err-msg"></span>
  156.       </div>
  157.       <div>
  158.           Число (>=100): <input class="validate" type="text" name="some_number" data-validator="some-number"/>
  159.           <span class="err-msg"></span>
  160.       </div>
  161.       <div>
  162.           Цвет:
  163.           <select class="validate" name="some_color" data-validator="some-color">
  164.               <option value="">???</option>
  165.               <option value="red">Красный</option>
  166.               <option value="blue">Синий</option>
  167.               <option value="magenta">Фиолетовый</option>
  168.           </select>
  169.           <span class="err-msg"></span>
  170.       </div>
  171.       <button id="btn-test">Тест</button>
  172.   </form>
  173.   </body>
  174. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!