Mar 14 2016 at 12:15

Web форма с интерактивной валидацией (HTML+CSS+jQuery+Notify.js)

Invite pending

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

Постановка задачи

Необходимо сделать форму для отправки заявки на регистрацию пользователя. Форма должна содержать следующие поля:

Имя (длина не более 25 символов, не может быть пустым)
E-mail (только mail.com, не может быть пустым)
Пароль (не менее 5 и не более 10 символов, не может быть пустым)
Подтвердить (должен совпадать с паролем, не может быть пустым)
Информация (в свободной форме, не более 250 символов, не может быть пустым)

Отправка данных осуществляется кнопкой «Отправить заявку», при условие что все поля заполнены правильно.

Используемые технологии

Для реализации поставленной задачи будем использовать:

HTML 5 (doc)
CSS 3 (doc)
jQuery 1.12.0 (doc)
Notify.js (doc)

Каркас (HTML)

Первым делом выставим кодировку и добавим jQuery и Notify.js:

<head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script src="http://rawgit.com/notifyjs/notifyjs/master/dist/notify.js"></script>
</head>

Теперь добавляем добавим тело страницы с формой:

<body>
  <form action="/reg" method="POST" id="regForm">
  <lable id="title">Запрос на регистрацию</lable>
  <table>
    <tboby>
      <tr>
        <td class="lbl">Имя:</td>
        <td><input type="text" name="name" id="name" class="textbox"/>
      </tr>
      <tr>
        <td></td>
        <td><lable class="help">максимум 25 символов</lable></td>
      </tr>
      <tr>
        <td class="lbl">E-mail:</td>
        <td><input type="text" name="mail" id="mail" class="textbox"/>
      </tr>
      <tr>
        <td></td>
        <td><lable class="help">только @mail.com</lable></td>
      </tr>
      <tr>
        <td class="lbl">Пароль:</td>
        <td><input type="password" name="password1" id="password1" class="textbox"/>
      </tr>
      <tr>
        <td></td>
        <td><lable class="help">от 5 до 10 символов</lable></td>
      </tr>
      <tr>
        <td class="lbl">Полтвердить:</td>
        <td><input type="password" name="password2" id="password2" class="textbox"/>
      </tr>
      <tr>
        <td></td>
        <td><lable class="help">должен совпадать с паролем</lable></td>
      </tr>
      <tr>
        <td class="lbl">Информация:</td>
        <td><textarea maxlength="250" name="info" id="info" class="textbox"></textarea>
      </tr>
      <tr>
        <td></td>
        <td><lable class="help">в свободной форме, максисум 250 символов</lable></td>
      </tr>
    </tbody>
  </table>
  <input type="button" id="send" value="Отправить заявку"/>
</form>
</body>

В результате на странице появляется вот такая страшная штука:

Оформление (CSS)

Для того чтобы облагородить наш будущий шедевр, прикрутим стили:

body {
  background-color:rgb(0, 0, 0);
}

form {
  display:block;
  width:450px;
  height:auto;
  margin:50px auto;
  padding:10px;
  border-radius:15px;
  background-color:rgb(84, 84, 84);
  font-size:16px;
  font-family:'Arial';
  color:rgb(255, 255, 255)
}

table {
  margin:0 auto;
}

table td {
  vertical-align: top;
}

table td.lbl {
  padding-top:12px;
}

#title {
  display:block;
  margin:0;
  padding: 20px;
  text-align:center;
  font-size:20px;
  color:rgb(0, 184, 246);
}

.textbox {
  width:200px;
  height:auto;
  margin-left:10px;
  padding:10px;
  border:none;
  border-radius:10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  background-color:rgb(190, 190, 190);
  font-size:16px;
  color:rgb(63, 63, 63);
}

.errtextbox {
  box-shadow: 0 0 10px rgb(255,0,0);
}

.help {
  width:190px;
  display:block;
  margin-bottom:25px;
  padding-left:25px;
  font-size:12px;
  color:rgb(140, 140, 140);
}

#info {
  height:100px;
  resize:none;
}

#send {
  display:block;
  margin:0 auto 10px;
  padding:7px;
  border:none;
  border-radius:10px;
  background-color:rgb(0, 128, 174);
  font-size:16px;
  color:rgb(255, 255, 255);
}

В итогу получаем вот такой внешний вид формы:

Валидация (jQuery + NotifyJS)

Вывод красивых сообщений об ошибке осуществляется Notify.js. На официальном сайте представлена достаточно подробная документация по использованию (ссылка выше в разделе используемые технологии).

Ниже приведены основные функции:

$.notify("Ошибка!", "error"); // выводит сообщение об ошибки
$.notify("Информация", "info"); // выводит информационное сообщение
$.notify("Обратите внимание", "warn"); // выводит предупреждение
$.notify("Выполнено", "success"); // выводит сообщение об удачном завершение

Все эти сообщения выводятся по умолчанию в верхнем левом углу экрана, для того чтобы привязать вывод сообщения к элементу делаем следующее:

$("#elementId").notify("BOOM!", "error");

elementId — id того элемента, к которому делаем привязку. При таком написание сообщение будет выводиться под элементом, если необходимо, то позицию можно задать вручную.

Например, выведем сообщение справа от элемента:

$("#elementId").notify( "Сообщение справа", { position:"right" });

И наконец самое интересное, добавим блок jQuery для обработки ошибок заполнения формы в реальном времени.

/* Изначально форма не заполнена и по этому считаем что все возможные ошибки есть  */
var errorNull = true, errorMail = true, errorPass = true;

/* Для удобства и уменьшения размера кода выносим функцию проверки поля на null в отдельную переменную */
var checkNull = function(){
  $(this).val($(this).val().trim());
  if ($(this).val() =="") {
    /* Выводим сообщение об ошибке под элементом.
       This в данном случае это элемент, который инициировал вызов функции */
    $(this).notify("Поле нужно заполнить", "error"); 
    $(this).addClass("errtextbox");
    errorNull = true;
  } else {
    errorNull = false;
    $(this).removeClass("errtextbox");
  }
};

/* Проверяем значения полей Имя и Информация на null в момент когда они теряют фокус */
$("#name").focusout(checkNull);
$("#info").focusout(checkNull);

/* Проверка поля Имя на соответствие длинны */
$("#name").keyup(function(){
  var value = $(this).val();
  if (value.length > 24){ 
    $(this).notify("Максимум 25 символов", "info");
    $(this).val(value.slice(0,24));
  }
});

/* Проверяем корректность E-mail */
$("#mail").focusout(function(){
  var value = $(this).val().trim();
/* Для этого используем регулярное выражение  */
  if (value.search(/^[a-z0-9]{3,}@mail\.com$/i) != 0) {
    $(this).notify("E-mail введён не корректно", "error");
    $(this).addClass("errtextbox");
    errorMail = true;
  } else { 
    $(this).removeClass("errtextbox");
    errorMail = false;
  }
});

/* Проверяем длину пароля */
$("#password1").focusout(function(){
  var value = $(this).val();
  if (value.length <= 4) { 
    $(this).notify("Минимум 5 символов", "error");
    $(this).addClass("errtextbox");
    errorPass = true;
  } else {
    if (value.length > 9) {
      $(this).notify("Миксимум 10 символов", "error");
      $(this).addClass("errtextbox");
      errorPass = true;
    } else {
      errorPass = false;
      $(this).removeClass("errtextbox");
    }
  }
});

/* Проверяем соответствие пароля и подтверждения */
$("#password2").focusout(function(){
  var value = $(this).val();
  if (value != $("#password1").val()) {
    $(this).notify("Пароль не совпадает", "error");
    $(this).addClass("errtextbox");
    errorPass = true;
  } else {
    errorPass = false;
    $(this).removeClass("errtextbox");     
  }
});

/* В результате клика по кнопке отправить если ошибок заполнения нет то форма отправляется иначе получаем сообщение об ошибке */
$("#send").click(function(){
  if (!(errorNull || errorMail || errorPass)) {
    $("#regForm").submit();
  } else {
    $(this).notify("Форма пустая или заполнена не корректно", "error");
  }
});

Заключение

Вот что получилось в результате

Результат можно посмотреть на codepen.

Дорогие читатели, если статья понравилась и вам интересен подобный материал, то пишите в комментариях. Если у вас есть замечания по качеству кода или полезные советы — буду рад, тоже пишите. Спасибо за внимание.

Hubs: