Валидация форм на html и css. трюки и фокусы с проверкой форм

Формы jQuery, доступные на CodeCanyon

Самостоятельная реализация валидации данных – очень полезный навык. Дополнительную функциональность помогут добавить готовые пакеты, созданные на основе jQuery и JavaScript.

1. Конструктор пошаговых jQuery форм Timon Step Form

Если вам нужна пошаговая форма, обратите внимание на пакет Timon Step Form. В состав этого набора входит множество готовых элементов форм, а также коллекция эффектов перехода

Это визуальный конструктор, для его использования не нужны навыки программирования. Имеется встроенная jQuery-валидация входных данных.

2. Smart Forms

Smart Forms представляет собой полнофункциональный фреймворк для создания, как простых, так и сложных форм. В его состав входит поддержка Google reCAPTCHA, проверка номеров телефонов и многое другое. Валидация реализована на jQuery, что делает данный фреймворк отличным выбором.

3. Just Forms Advanced

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

4. Forms Plus JS

Forms Plus – фреймворк для создания форм с валидацией и вычислениями. Включает в себя более 100 шаблонов для разработки форм. Поддерживает:

ввод капчи;
выбор даты, времени и цвета;
группировку полей;
скрытые поля;
создание блоков для действий.

5. Sky Forms

Мы заканчиваем обзор на фреймворке Sky Forms. Данный пакет включает в себя обширный набор стильных элементов, более 300 векторных иконок и множество цветовых схем, поддерживает любую кастомизацию. Предусматривает обработку шести состояний для элементов ввода, включая наведение курсора, фокус и так далее. Формы, созданные с помощью Sky Forms, корректно работают во всех наиболее популярных браузерах.

Дополнительные опции настройки плагина

Вы можете отключить валидацию при случайном переходе в поле с помощью клавиши или при клике мышью. Для этого надо установить параметры onfocusout, onkeyup, или onclick на false

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

У вас также есть возможность изменить элемент, который используется для вывода ошибок. По умолчанию используется label, но при желании вы можете изменить его на em или любой другой элемент, используя параметр errorElemet. Выбранный элемент, в свою очередь, можно обернуть в другой HTML-элемент, применив параметр wrapper.

Рассмотренные варианты – наиболее типичные опции валидации данных. Кроме этих вариантов, вам могут пригодиться и некоторые другие – например, если вы захотите изменить местоположение уведомлений или сгруппировать их вместе.

Добавление правил валидации для полей ввода

Вы также можете передать определенные правила в метод validate() для установления правил, в соответствии с которыми должна проверяться введенная информация. Значением параметра rules должны быть пары «ключ-значение». Ключом в каждом случае является название проверяемого элемента, а значением – набор правил для проверки информации.

Также можно добавить проверку условий данных в различных полях – с использованием ключевого слова depends («зависит от») и возвращая, соответственно, результат true («истинно») или false («ложно»). Ниже приведен пример использования простого набора правил для определения корректности введенных данных:

$(document).ready(function() {
$("#basic-form").validate({
rules: {
name : {
required: true,
minlength: 3
},
age: {
required: true,
number: true,
min: 18
},
email: {
required: true,
email: true
},
weight: {
required: {
depends: function(elem) {
return $("#age").val() > 50
}
},
number: true,
min: 0
}
}
});
});

Такие опции валидации схожи с атрибутами, которые вы можете добавить в разметку формы. Например, установка параметра required на true сделает элемент обязательно необходимым для успешной отправки формы. Установление minlength на значение 3 обяжет пользователей вводить в поле как минимум три символа. Есть и другие встроенные методы валидации, с которыми можно ознакомиться на странице с технической документацией.

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

Примеры

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

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

Атрибут target определяет вывод результатов в новом окне/вкладке. Страница, на которой будут выведены результаты обработки, специально предназначена для того, чтобы вы поняли механизм работы форм. Скрипт формы выполняется на сервере до вывода результатов.

<form action="../../form-result.php" method="post" target="_blank">
 <p>Username: <input type="text" name="user"></p>
 <p>Password: <input type="password" name="pass"></p>
 <p><input type="submit" value="Send data"></p>
</form>

Во втором примере мы добавим в тег form новые элементы управления (пару переключателей и три чекбокса). Мы также добавим кнопку reset, чтобы вы могли поэкспериментировать с элементами управления, изменяя их значения и снова сбрасывая с помощью кнопки.

Также мы будем использовать элемент label. С его помощью мы можем связать текст с элементом управления. Самый простой способ сделать это — заключить и текст, и элемент управления в открывающийся и закрывающийся тег.

<form action="../../form-result.php" method="post" target="_blank">
  <p><label>Full name: <input type="text" name="fullname"></label></p>
  <p>Gender:
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
  </p>
  <p><label>Address: <input type="text" name="address"></label></p>
  <p>Interests:
    <label><input type="checkbox" name="books"> Books</label>
    <label><input type="checkbox" name="movies"> Movies</label>
    <label><input type="checkbox" name="videogames"> Videogames</label>
  </p>
  <p><input type="submit" value="Send data"> <input type="reset" value="Reset form"></p>
</form>

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

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

Обратите внимание, что мы используем для атрибута method значение «GET» просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение

Что-то наподобие этого: «?fullname=john&birthdate=15/10/2002&…».

<form action="../../form-result.php" method="get" target="_blank">
  <fieldset>
    <legend>Basic information</legend>
    <p><label>Full name: <input type="text" name="fullname"></label></p>
    <p><label>Birth date: <input type="date" name="birthdate"></label></p>
    <p>Gender:
      <label><input type="radio" name="gender" value="male"> Male</label>
      <label><input type="radio" name="gender" value="female"> Female</label>
    </p>
    <p><label>Address: <input type="text" name="address"></label></p>
    <p><label>Phone number: <input type="tel" name="phone"></label></p>
  </fieldset>
  <fieldset>
    <legend>Extra information</legend>
    <p>Interests:
      <label><input type="checkbox" name="books"> Books</label>
      <label><input type="checkbox" name="movies"> Movies</label>
      <label><input type="checkbox" name="videogames"> Videogames</label>
    </p>
    <p><label>Favorite color: <input type="color" name="favoritecolor"></label></p>
  </fieldset>
  <p>
    <input type="submit" value="Send data">
    <input type="reset" value="Reset form">
  </p>
</form>

И, наконец, мы создадим тег form с возможностью загрузки файла

В этом примере нам нужно обратить внимание на пару атрибутов: method, который может принимать только значение «POST«, так как это единственный метод, который может передавать двоичные данные. И enctype, который должен иметь значение «multipart/form-data«

Если данная настройка не соблюдается, загрузка файлов будет невозможна.

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

<form action="../../form-result.php" method="post" enctype="multipart/form-data" target="_blank">
  <p><label>File: <input type="file" name="ufile"></label> <input type="submit" value="Send data"></p>
</form>

среда, 29 декабря 2010 г.

Очистка input file

Для загрузки файла на сервер, обычно, используют . Это удобный и проверенный способ, но в нём есть одна проблема — очистка этого поля от выбранного файла. Её нужно делать, если загрузка не обязательна. Т.е. у пользователя должна быть возможность отменить загрузку выбранного им файла.

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

Такой подход выполняет поставленную задачу. Однако он обладает одной очень неприятной особенностью. Если пользователь очистит файловое поле, а потом опять выберет файл, то этот файл не отправится на сервер (точную причину такого поведения я не знаю). Это очень серьёзная ошибка в логике работы файлового поля, поэтому я предлагаю менее красивый, но правильно работающий способ:

Здравствуйте, уважаемые пользователи.

Возникла такая проблема, которую не могу решить самостоятельно. Суть проблемы вот в чем: Есть input file, в котором пользователи могут выбрать несколько файлов. Как только пользователь выбирает файлы, в jquery срабатывает событие change, и специальном div сверху отображаются имена всех выбранных файлов. Рядом с каждым именем есть кнопка «Удалить». Необходимо сделать по нажатию на кнопку «Удалить» функцию, которая бы удаляла конкретный файл из числа выбранных, и, соответственно, меняла бы значение input file.

Можно ли очистить управляющее значение с помощью jQuery? Я пробовал следующее:

Но это не работает.

Кастомизация сообщений об ошибках

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

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

При этом важно помнить, что присвоение errorClass уведомлениям fail-alert удаляет класс error из недопустимых элементов. Для присвоения нескольких классов одному и тому же элементу следует использовать errorClass: «error fail-alert»

То же самое касается validClass.

Если пользователь вводит корректные данные, дополнительные метки к форме не добавляются. Таким образом, классы validClass остаются присвоенными корректным входным элементам.

Дополнительный JavaScript-код используется только для присвоения классов:

$(document).ready(function() {
$("#basic-form").validate({
errorClass: "error fail-alert",
validClass: "valid success-alert",
// ... More validation code from previous example
Далее приведен CSS -код, который мы будем использовать для оформления сообщений об ошибках:
label.error.fail-alert {
border: 2px solid red;
border-radius: 4px;
line-height: 1;
padding: 2px 0 6px 6px;
background: #ffe6eb;
}
input.valid.success-alert {
border: 2px solid #4CAF50;
color: green;
}

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

Валидация первой формы

Рассматриваемый нами плагин можно использовать без внесения каких-либо заметных изменений в разметку страницы. Единственная поправка, которую вам потребуется сделать – это добавить id или class к форме, к которой нужно подключить валидацию.

Ниже приведена разметка базовой формы, ввод данных в которой мы будем проверять с помощью jQuery-плагина.

<form id="basic-form" action="" method="post">
<p>
<label for="name">Name <span>(required, at least 3 characters)</span></label>
<input id="name" name="name" minlength="3" type="text" required>
</p>
<p>
<label for="email">E-Mail <span>(required)</span></label>
<input id="email" type="email" name="email" required>
</p>
<p>
<input class="submit" type="submit" value="SUBMIT">
</p>
</form>

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

Для подключения валидации к этой форме надо всего лишь вставить приведенный ниже фрагмент, написанный на JavaScript, в код страницы:

$(document).ready(function() {
$("#basic-form").validate();
});

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

Сообщения об ошибках передаются в DOM (объектную модель документа) с помощью элемента label. Поскольку этот элемент предусматривает класс error, к сообщениям можно легко применить собственные стили. То же самое справедливо в отношении invalid input, у которого тоже имеется класс error.

Тег form в html — описание

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

Из всех атрибутов элемента два являются особенно важными, они используются во всех формах: action и method. Атрибут action указывает на расположение скрипта, который обрабатывает информацию, передаваемую браузером при отправке данных формы. Скрипт может быть написан на любом языке, исполняемом на стороне сервера.

Атрибут method указывает метод отправки данных формы. Рекомендуется использовать метод POST, потому что он скрывает отправляемую информацию и позволяет передавать двоичные данные. Тем не менее, в некоторых частных случаях необходимо использовать метод GET.

Кроме этого HTML тег form представляет собой контейнер для других элементов управления. Ниже приведен их перечень:

button: кнопка, при нажатии которой могут выполняться различные действия в зависимости от значения атрибута type. А именно:

submit: отправляет данные формы на сервер;
reset: сбрасывает значения всех элементов управления к состоянию по умолчанию;
button: не выполняет никаких действий;
menu: выводит меню.

fieldset: группирует наборы элементов управления по определенному критерию;
input: в зависимости от значения атрибута type данный элемент управления может использоваться для различных целей:

hidden: скрытый элемент управления, используемый для передачи информации на сервер, как правило, управляется скриптом;
text: элемент управления, используемый для ввода фрагмента текста одной строкой;
search: используется для ввода поисковой строки;
tel: элемент управления тега form, используемый для предоставления номера телефона;
url: текстовое поле, используемое для ввода одного абсолютного URL-адреса;
email: элемент управления, предназначенный для редактирования одного или нескольких адресов электронной почты;
password: текстовое поле для ввода паролей, в котором символы скрыты точками;
datetime: элемент управления для ввода даты и времени;
date: элемент управления для ввода определенной даты;
month: элемент управления для ввода определенного месяца;
week: элемент управления для ввода определенной недели;
time: элемент управления для ввода о времени;
number: элемент управления для ввода определенного числа;
range: для ввода одного или двух чисел в указанном диапазоне;
color: для ввода цвета;
checkbox: для ввода логического значения (истина / ложь);
radio: элемент управления, используемый для выбора одного из нескольких вариантов;
file: элемент управления, используемый для загрузки файлов на сервер;
submit: кнопка для отправки данных HTML тега form;
image: то же самое, что submit, но с возможностью вывести вместо кнопки по умолчанию пользовательское изображение;
reset: кнопка, используемая для сброса значений элементов управления формы;
button: кнопка без назначенного действия по умолчанию.

keygen: элемент управления, используемый для генерации открытой / секретной пары ключа;
label: используется для вывода подписей для элементов управления формы;
object: объект представления и отображения вложенного контента;
output: элемент управления, используемый для просмотра результатов вычислений, выполняемых на странице, или результатов взаимодействия пользователя с различными элементами управления формы;
select: элемент управления для выбора одного или нескольких вариантов из списка;
textarea: элемент управления, используемый для ввода фрагмента текста, состоящего из одной или более строк;
img: используется для вывода изображения.

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

Атрибут name этого элемента был удален из предыдущих версий стандарта. В HTML5 он был вновь восстановлен, чтобы дать возможность авторам ссылаться на форму по ее имени.

Верстка форм

Не используйте для разметки групп инпутов и
Почему?

Для разметки групп полей есть более подходящие теги: и . Они не только внесут разнообразие в код, но также сделают вашу форму более доступной.

А как надо?
С чистыми и могут возникать затруднения при стилизации и позиционировании контента, но это легко решается дополнительными обёртками.

Например, так как используется для групп полей, а у каждого поля есть лейбл, каждой паре + обычно требуется обёртка, и здесь можно удобно использовать ненумерованные списки (). После этого можно всё позиционирование делать для списка и его элементов, и с раскладкой больше не будет никаких проблем. Чтобы вместе с инпутом не читалась информация об элементах списка, его нужно скрыть от скринридеров, задав .

ведёт себя своеобразно, но его можно вырвать со своего места с помощью , а для позиционирования текста внутри завернуть текст в спаны.
- Плохо
- Хорошо
Не используйте вместо
Почему?

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

Это будет не самым правильными решением, потому что у всех инпутов должны быть лейблы. Если добавить скрытый лейбл, его содержимое будет дублировать уже имеющийся , и всё это вместе будет выглядеть довольно странно.

Как это увидеть?

Посмотрите на форму без стилей:

А как надо?
Для одиночного текстового поля не нужны и , они для групп полей. Если такому полю требуется обёртка, можно использовать . Название поля нужно поместить в .

Если стилизация не привязана к тегу, вы без проблем можете использовать эти же стили (а лучше класс) для стилизации лейбла.
- Плохо
- Хорошо
Теперь ничего не дублируется:
Не используйте для скрытия инпутов

Почему?

Инпуты, спрятанные таким образом, становятся полностью недоступны для скринридеров и навигации с клавиатуры

Как это увидеть?

Установите фокус в первое поле и перемещаясь по форме с помощью и стрелок попробуйте выбрать цвет кота:

Ничего не получится, с клавиатуры выбор цвета недоступен.

А как надо?

Для скрытия инпутов используйте класс :

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

Попробуйте теперь с помощью и стрелок выбрать цвет кота (чтобы выбрать цвет нажмите пробел):

Всё работает.

Итого

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

25 ответов

Легко: вы оборачиваете элемент

и вы можете запустить сброс, используя jQuery с кодом, подобным следующему:

$(«#control»).val(») — это все, что вам нужно! Протестировано на Chrome с использованием JQuery 1.11

Другие пользователи также протестировали в Firefox.

Я использовал https://github.com/malsup/form/blob/master/jquery.form.js , который имеет функцию clearInputs() , которая является кросс-браузерной, хорошо протестированной, простой в использовании и обрабатывает также проблемы с IE и очистка скрытых полей при необходимости. Может быть, немного длинное решение, чтобы очистить только ввод файла, но если вы имеете дело с загрузкой файлов через браузер, то это решение рекомендуется.

Я закончил с этим:

возможно, не самое элегантное решение, но оно работает, насколько я могу судить.

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

Заключение

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

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

Наталья Кайдаавтор-переводчик статьи «Easy Form Validation With jQuery»