HTML5 валидация форм

2013-09-20
5.0 / 5 (2 голоса)

Возможность использования чистого HTML (иногда с использованием CSS) для проверки формы до недавнего времени было нереально. Уверен, что было и есть, масса  JavaScript плагинов, которые проверяют форму, на валидность и корректность заполнения, но все они не имеют единого стандарта и лишь нагружают страницу.

 

1 Атрибут "required"

Простейшее изменение, которое вы можете сделать для вашей формы, чтобы отметить это поле ввода текста, как "обязательное":

Your Name: <input type="text" name="name" required>

Это информирует (HTML5) веб-браузера, что поле должно быть обязательно заполнено. Различные браузеры могут по разному  его отображать.

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

С помощью CSS вы можете разместить маркеры внутри или рядом с полем ввода, или просто поменять цвет фона и границы.

2 Входные данные

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

  • type="email"

    Поставив type="email" браузер будет обязательно проверять на соответствие формата адреса электронной почты: 

    E-mail: <input type="email" name="email" required placeholder="Введите ваш e-mail">

  • type="url"

    Аналогичным образом, вы можете проверить и url адрес. 

    Website: <input type="url" name="website" required placeholder="Введите url вашего сайта">

     

  • type="number" и type="range"

    Если вам необходимо выбрать диапазон дат, то вам помогут type="number" и type="range"

    Возраст: <input type="number" size="6" name="age" min="18" max="99" value="25">
    
    Месяц: <input type="range" size="2" name="satisfaction" min="1" max="12" value="5">

  • другие типы

    Существует ещё множество типов, которые проверяют входные данные:

    • color
    • date
    • datetime
    • datetime-local
    • month
    • search
    • tel
    • time
    • week

3 Стилизация форм с использованием CSS

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

  • :valid
input:required:valid {
background-image: url(/images/valid.png);
background-position: right top;
background-repeat: no-repeat; }

  • :invalid
input:required:invalid, input:focus:invalid { 
background-image: url(/images/invalid.png);
background-position: right top;
background-repeat: no-repeat; }

4 Свои шаблоны

Если же вам нужен собственный тип:

  • URL
    • input type="url" pattern="https?://.+"
  • Адрес
    • input type="text" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}"
  • Дата (dd/mm/yyyy or mm/dd/yyyy)
    • input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}"
  • Цена
    • input type="text" pattern="\d+(\.\d{2})?"

5 Подсказка "placeholder"

Ну и одним из самых простых, но очень-очень полезных атрибутов стало поле - "placeholder". Это подсказка, что именно необходимо вводить пользователю. Раньше такое возможно было сделать, только с использованием javascripts событий onfocus или onblur

<input name="amount" type="text" placeholder="Введите цену" value="" required="" pattern="^[ 0-9]+$">

Прочитано 3008 раз Последнее изменение 2015-10-17

Оставить комментарий

Все поля отмеченные (*) обязательны для заполнения