Всем привет. Не смотря на свою 110% загруженность я стараюсь пополнять свой блог новыми полезными заготовками! Сегодня я хочу привести пример удобного плагинчика, который поможет вам реализовать проверку полей форм на стороне клиента, т.е. в с помощью javascript.
Ни для кого не секрет, что любые формы на сайте нужно проверять. Нужно проверять как на стороне сервера (must have), так и на стороне клиента. Форм много, и добавлять проверки для каждого поля ввода достаточно противное занятие. Давайте попробуем обобщить данную задачу.
Если пораскинуть мозгами, то валидация форм как правило сводится к нескольким задачам:
1) Проверка обязательных полей.
2) Блокировка нежелательных ввода символов
3) Проверка введенного значения с желаемым результатом.
А что лучше всего подходит для проверки строк? Правильно — регулярные выражения, именно их мы и будет активно применять для решения поставленных задач!
Пункт 1, как правило, решается добавлением атрибута required к тегу формы (например <input required …>). Однако это приводит к появлению окна сообщения, реализованного на уровне браузера. Кому то это решение подходит, но как правило дизайнеры предлагают свое видение данных ошибок, а как следствие реализовывать валидацию обязательного заполнения стоит с помощью скриптов.
Для этого добавим следующий код.
$('[required]').each(function() {
$(this).prop('required', false).attr('data-required', 'true');
}).click(function() {
$(this).removeClass('error').parent().find('.error-message').text('');
});
Примечание: Код предполагает наличие библиотеки Jquery, а так же что все инпуты имеют некий родительский контейнер (как правило так оно и бывает в реальных проектах). Пример:
<div class="group">
<input required name="somename" />
</div>
Приведенный выше код автоматически удалит атрибут required у тегов и создаст вместо него атрибут data-required=»true».
Для решения второй задачи создадим следующий обработчик:
$('[data-regexp-input]').keypress(function(e) {
if(e.key || [46, 8, 37, 38, 39, 40].indexOf(e.keyCode) == -1) {
if(!new RegExp($(this).data('regexp-input'), "g").test(e.key)) {
e.preventDefault();
return false;
}
}
});
$('[data-regexp-block]').keypress(function(e) {
if(new RegExp($(this).data('regexp-block'), "g").test(e.key)) {
e.preventDefault();
return false;
}
});
Он позволит нам фильтровать вводимые символы как по разрешенным символам, так и по запрещенным. Теперь если мы захотим разрешить вводить в поле только цифры и пробелы, то там логичней воспользоваться обработчиком разрешенных символов:
<input type="text" data-regexp-input="[\d\s]" />
Если же мы хотим разрешить вводить все кроме символов (, ), !, ?, то логичней будет воспользоваться обработчиком блокирования символов:
<input type="text" data-regexp-block="[!\(\)\?]" />
Для решения третей задачи, нам понадобится вспомогательная функция.
function checkRegexp(o, e) {
var $this = $(o);
$this.removeClass('error');
$this.parent().find('span.error-message').text('');
if($this.data('regexp') && $this.data('regexp') != '') {
if($this.parent().find('span.error-message').length == 0) {
$this.parent().append('');
}
if($this.val() == '' && $this.data('required')) {
$this.addClass('error');
$this.parent().find('span.error-message').text('Обязательно к заполнению');
} else {
if(!new RegExp('^' + $this.data('regexp') + '$', 'g').test($this.val())) {
$this.addClass('error');
$this.parent().find('span.error-message').text('Заполненно некорректно');
}
}
}
$this.closest('form').find('[type="submit"]').prop('disabled', $this.closest('form').find('input.error').length != 0);
}
Данный код проверяет переданный объект «o» (это будет инпут) и в случае каких либо ошибок создает дополнительный блок span с сообщением об ошибке. Так же данная функция обрабатывает созданный в пункте 1 атрибут data-required.
Теперь необходимо повесить данную функцию на наши элементы
$('input[data-regexp]').click(function() {
$(this).removeClass('error');
}).keyup(function(e) {
checkRegexp(this, e);
}).blur(function(e) {
checkRegexp(this, e);
});
Теперь для проверки валидность поля на желаемый шаблон достаточно добавить тегу атрибут data-regexp, например проверка поля на формат даты в виде ГГГГ-ММ-ДД:
<input type="text" data-regexp="\d{4}\-\d{2}\-\d{2}" />
Вот собственно и все. Всего несколько строк кода, позволяют нам полностью перенести задачу валидации формы из скриптов в html файл путем добавления нужных атрибутов для элементов ввода. Описанные выше скрипты охватывают более 50% случаев всех необходимых валидаций, а значит способны сэкономить кучу времени Вам как разработчику.
