Часто при работе с формами требуется проводить простейшую валидацию, просто, что бы не отправляли, пустую форму. Или по простейшему набору:
- Поле заполнено ли нет;
- Корректность ввода e-mail по стандартной маске;
- Только цифры;
- Только буквы;
- Что бы не было введено спец символов.
Делать это можно на стороне клиента силами jQuery.
Скриптов для валидации форм существует большое количество, есть просты и понятные или продуманные и сложные. Всегда найти можно что именно вам понравится.
Мне пришелся по нраву jQuery.validationEngine.
Подключение валидации к форме и ее настройка не займет много времени. Для начала качаем свежею версию с GitHub (jQuery-Validation-Engine) ( или jQuery.validationEngine v2.6.2 )
Подключаем стили, jQuery и наш плагин на страницу с формой:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="css/validationEngine.jquery.css"> <script src="js/jquery.validationEngine.js"></script> <script src="js/jquery.validationEngine-ru.js"></script>
Добавляем нашей форме индификатор что бы объясниться скрипту какую именно форму необходимо обрабатывать
<form action="#" id="myForm"> ... </form>
Далее нужно дать плагину понять что он должен валидировать
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('#myForm').validationEngine();
});
})(jQuery);
</script>
И самая главная часть, это определить, что именно и как в нашей форме мы будем проверять на корректность внесения данных перед отправкой. Что бы указать, что именно этот элемент формы необходимо проверять к элементу просто добавляем класс validate.
- class="validate[required] text-input" - Поле обезательно для заполнения
- class="validate[required,custom[email]]" - В поле должен быть указан только e-mail
- class="validate[required,custom[phone]]" - В поле должен быть указан только телефон
- class="validate[required,custom[url]]" - В поле должен быть указан только Url - адрес
- class="validate[required,custom[onlyNumberSp]]" - В поле должен быть указан только цыфры
- class="validate[required,custom[onlyLetterNumber]]" - В поле должен быть указан только буквы и цыфры без спец. символов
Более подробнее о возможностях и документацию по jQuery.validationEngine можно почитать на странице проекта