Проверяем данные в форме, с помощью jQuery

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

Для проверки форм, мы воспользуемся замечательным плагином для jQuery, который так и называется — jQuery Validation Plugin.Для примера возьмем простую форму, код которой представлен ниже.

<form name="myForm" id="myForm" action="" method="post">
  <label class="lab" for="login">Логин: </label>
  <input type="text" name="login" id="login" value=""><br>
  <label class="lab" for="email">Почта: </label>
  <input type="text" name="email" id="email" value=""><br>
  <label class="lab" for="site">Сайт: </label>
  <input type="text" name="site" id="site" value=""><br>
  <label class="lab" for="age">Возраст: </label>
  <input type="text" name="age" id="age" value=""><br>
  <label class="lab" for="check">Я согласен: </label>
  <input type="checkbox" name="check" id="check"><br>
  <input type="submit" name="submit" value="Отправить">
</form>

В приведенной форме, все поля должны быть обязательны для заполнения. Логин должен быть от 5 до 20 символов, указан верный адрес электронной почты, валидный сайт, значение возраста должно быть числовым и не меньше 18, ну и обязательно должен быть отмечен чекбокс.

Для проверки всех заданных нами критериев необходимо проделать всего несколько манипуляций.

Подключаем сам jQuery и плагин для проверки формы:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>

Ну и теперь пишем собственно сам JavaScript код:

<script type="text/javascript">
$(document).ready(function(){
  $("#myForm").validate({
    rules: {
      login: {
        required: true,
        rangelength: [5, 20]
      },
      email: {
        required: true,
        email: true
      },
      site: {
        required: true,
        url: true
      },
      age: {
        required: true,
        number: true,
        min: 18
      },
      check: {
        required: true
      }
    },
    messages: {
      login: {
        required: "Введите имя",
        rangelength: "Длина логина должна быть от {0} до {1} знаков"
      },
      email: {
        required: "Введите E-mail",
        email: "Неверный формат E-mail"
      },
      site: {
        required: "Введите сайт",
        url: "Неверный формат сайта"
      },
      age: {
        required: "Укажите возраст",
        number: "Значение должно быть цифровым",
        min: "Возраст должен быть больше {0} лет"
      },
      check: {
        required: "Отметьте чекбокс"
      }
    }
  });
});
</script>

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

label.error {
  color: red;
  font-style: italic;
  margin-left: 5px;
}

input.error {
  border: 1px dotted red;
}

Тем самым мы выделим сообщения об ошибках красным курсивом, а неверно заполненное поле обведем красным пунктиром.

Пробежимся немного по JavaScript коду. В секции rules, описываются элементы, к которым необходимо приделать проверку, а также методы этой самой проверки. Возьмем для наглядности поле с указание возраста и именем age. Для него указано:

age: {
  required: true,
  number: true,
  min: 18
}

required означает что поле должно быть обязательно для заполнения, number — то что поле должно быть числовым, ну а значение min указывает на то, что это число должно быть не меньше 18. Значения всех доступных методов проверки можно посмотреть на сайте плагина.

Следующей секцией после секции rules, идет секция messages,  в которой необходимо написать текст, который увидит пользователь когда не выполнит наши условия. Если же этого не сделать, то сообщения будут написаны на английском. Кстати можно русифицировать все стандартные сообщения об ошибках, для этого нужно создать и подключить к странице файл (ну или просто прописать на странице) примерно такого содержания:

jQuery.extend(jQuery.validator.messages, {
       required: "Это поле необходимо заполнить",
       remote: "Исправьте это поле чтобы продолжить",
       email: "Введите правильный email адрес.",
       url: "Введите верный URL.",
       date: "Введите правильную дату.",
       dateISO: "Введите правильную дату (ISO).",
       number: "Введите число.",
       digits: "Введите только цифры.",
       creditcard: "Введите правильный номер вашей кредитной карты.",
       equalTo: "Повторите ввод значения еще раз.",
       accept: "Пожалуйста, введите значение с правильным расширением.",
       maxlength: jQuery.format("Нельзя вводить более {0} символов."),
       minlength: jQuery.format("Должно быть не менее {0} символов."),
       rangelength: jQuery.format("Введите от {0} до {1} символов."),
       range: jQuery.format("Введите число от {0} до {1}."),
       max: jQuery.format("Введите число меньше или равное {0}."),
       min: jQuery.format("Введите число больше или равное {0}.")
});

Ну вот, вроде ничего сложного, если есть вопросы, отвечу в комментариях.