Спецификация HTML5 предоставляет нам несколько новых типов полей, атрибутов и других полезных функций для форм. Одна из наиболее интересных функций — это валидация формы со стороны браузера.
К сожалению еще не все браузеры поддерживают эти возможности и поэтому мы попытались сосредоточиться на использовании этих возможностей в Firefox 4.
Идея валидации формы в HTML5 состоит в том, чтобы отказаться от использования JavaScript при проверке содержания полей: действительно ли этот адрес электронной почты допустим? заполнено ли это поле? соответствуют ли пароли? Раньше в большинстве случаев для этих целей использовался JavaScript. Вы можете написать свой собственный javascript-код или воспользоваться javascript-библиотекой, но это всегда будет повторной, скучной и подверженной ошибкам задачей. С формами, проверенными браузером, Вы больше не должны заботиться о этих задачах, достаточно записать простой HTML.
Для пользователя проверка валидности, сделанная браузером, является гарантией качества с наилучшей доступностью и логичностью.
Если Вы используете новые атрибуты, связанные с проверкой валидности формы или новые input-ы с внутренней проверкой валидации, то браузер автоматически проведет проверку допустимости введенных данных (если они, конечно, поддерживаются браузером). Все новые типы input-ов, введенные HTML5, исключая search и tel, используют внутреннюю проверку допустимости.
Firefox 4 также собирается поддерживать email и url, и при валидации формы браузер проверит, является ли значение введенное в поле валидным адресом электронной почты или url соответственно.
Кроме того, нижеприведенные атрибуты обеспечат автоматический механизм валидации полей:
* required: проверяемое поле не пройдет валидацию, если его значение будет пусто. Это относится к тегам <input> и <textarea>. Если же его установить для <input type='checkbox'>, то элемент должен быть отмечен (checked) для успешного прохождения валидации. При использовании его для <input type='radio'>, должен быть отмечен один из переключателей. Если установлено на <input type='file'>, то файл должен будет быть выбран.
* pattern: Вы также можете определить регулярное выражение, чтобы проверить значение элемента. Этот атрибут может использоваться только для некоторых <input> (text, search, tel, email и url). Если Вы используете pattern, то настоятельно рекомендуется использовать атрибут title, чтобы описать шаблон.
* maxlength: maxlength может уже использоваться и в более ранних версиях браузеров, но он только блокирует ввод с клавиатуры для тега <input>, таким образом, что пользователи не могут ввести больше символов чем значение, определенное в атрибуте maxlength. В Firefox 4 — этот атрибут может также использоваться для <textarea>. Кроме того, если значение будет установлено через атрибут value, то элемент станет недопустимым (invalid), если у нового значения будет длина, больше чем maxlength.
Если у Вас есть своя собственная система для валидации формы, Вы, вероятно, должны иметь возможность отключить её когда браузер может сам управлять валидацией формы. Однако, у Вас могут быть какие-либо причины, почему Вы захотите отключить валидацию формы браузером. Серьезные основания для этого могут состоять в том, что если Вы хотите использовать некоторые новые типы input-ов, но при этом Вы не хотите проверять валидность их содержания.
Самый простой способ отказаться состоит в том, чтобы добавить атрибут novalidate для тега <form>. Вы можете также установить formnovalidate для Вашей кнопки «submit». Вы должны отдать предпочтение formnovalidate перед novalidate, если Вы хотите иметь одну кнопку «submit» для проверки валидности формы и другую без.
Вы можете сделать элемент недопустимым (invalid), вызвав .setCustomValidity (errorMsg). Эта функция принимает качестве параметра сообщение об ошибке. Вы можете передать пустую строку .setCustomValidity (''), если Вы хотите удалить пользовательскую ошибку.
С помощью этого метода Вы можете проверить, например, совпадает ли пароль в двух полях:
Каждый тип ошибок может иметь строку, которая давала бы описание ошибки. Например, если <input> будет обязательным для заполнения и при этом не будет иметь никакого значения, то сообщение будет, «Пожалуйста, заполните это поле». Firefox пытается быть настолько умным насколько возможно, чтобы показать соответствующее сообщение об ошибке, но Вы, возможно, могли бы хотеть переопределить его в некоторых ситуациях, где правила очень сложны. Например:
Вы могли бы предпочесть иметь простое сообщение «Пожалуйста, введите Ваш корпоративный адрес электронной почты.» вместо трех универсальных сообщений, зависящих от невыполненного ограничения.
Чтобы помочь с этим, можно использовать нестандартный атрибут x-moz-errormessage, который позволяет Вам определить сообщение об ошибке для данного поля формы. Независимо от ошибки, если x-moz-errormessage присутствует и отличается от пустой строки, это значение будет использоваться в качестве сообщения об ошибке вместо значения по умолчанию.
Этот атрибут нестандартный, поэтому должен использоваться осторожно. Кроме того, Вы должны знать, что .setCustomValidity() позволяет Вам косвенно устанавливать свое собственное сообщение об ошибке.
К сожалению, нет никакого способа изменить UI. Сообщение является часть браузера, и в настоящий момент нет возможно изменять стили браузера из контента. Это может измениться в будущем, но этого не будет для Firefox 4.
Если Вы считаете, что появляющееся сообщение уродливо, Вы должны иметь ввиду, что это не окончательный вариант. Разработчики попытаются улучшить это позже, см. баг 602500. Любые комментарии приветствуются!
CSS3 UI представляет новые псевдоклассы, которые теперь использует HTML5, такие как :invalid :valid :required и :optional. Firefox 4 поддерживают все эти псевдоклассы и добавляет новый псевдокласс: :-moz-submit-invalid, который применяется для кнопки «submit», когда у формы есть не валидный элемент.
У :invalid есть стиль по умолчанию — это красный box-shadow. Этот стиль по умолчанию будет удален, когда :-moz-ui-invalid будет добавлен. Также Вы можете легко удалить этот дефолтный стиль в своих таблицах стилей:
Примеры использования валидации формы.
К сожалению еще не все браузеры поддерживают эти возможности и поэтому мы попытались сосредоточиться на использовании этих возможностей в Firefox 4.
Почему валидация формы со стороны браузера?
Идея валидации формы в HTML5 состоит в том, чтобы отказаться от использования JavaScript при проверке содержания полей: действительно ли этот адрес электронной почты допустим? заполнено ли это поле? соответствуют ли пароли? Раньше в большинстве случаев для этих целей использовался JavaScript. Вы можете написать свой собственный javascript-код или воспользоваться javascript-библиотекой, но это всегда будет повторной, скучной и подверженной ошибкам задачей. С формами, проверенными браузером, Вы больше не должны заботиться о этих задачах, достаточно записать простой HTML.
Для пользователя проверка валидности, сделанная браузером, является гарантией качества с наилучшей доступностью и логичностью.
Как я могу сделать свою форму, использующую эту функцию?
Если Вы используете новые атрибуты, связанные с проверкой валидности формы или новые input-ы с внутренней проверкой валидации, то браузер автоматически проведет проверку допустимости введенных данных (если они, конечно, поддерживаются браузером). Все новые типы input-ов, введенные HTML5, исключая search и tel, используют внутреннюю проверку допустимости.
Firefox 4 также собирается поддерживать email и url, и при валидации формы браузер проверит, является ли значение введенное в поле валидным адресом электронной почты или url соответственно.
Кроме того, нижеприведенные атрибуты обеспечат автоматический механизм валидации полей:
* required: проверяемое поле не пройдет валидацию, если его значение будет пусто. Это относится к тегам <input> и <textarea>. Если же его установить для <input type='checkbox'>, то элемент должен быть отмечен (checked) для успешного прохождения валидации. При использовании его для <input type='radio'>, должен быть отмечен один из переключателей. Если установлено на <input type='file'>, то файл должен будет быть выбран.
<input required>
<textarea required></textarea>
* pattern: Вы также можете определить регулярное выражение, чтобы проверить значение элемента. Этот атрибут может использоваться только для некоторых <input> (text, search, tel, email и url). Если Вы используете pattern, то настоятельно рекомендуется использовать атрибут title, чтобы описать шаблон.
<input type='tel' pattern='\d\d \d\d \d\d \d\d \d\d' title="Напишите телефонный номер в формате 'XX XX XX XX XX'">
<input type='email' pattern=".*@company\.com" title="Введите email Вашей компании">
* maxlength: maxlength может уже использоваться и в более ранних версиях браузеров, но он только блокирует ввод с клавиатуры для тега <input>, таким образом, что пользователи не могут ввести больше символов чем значение, определенное в атрибуте maxlength. В Firefox 4 — этот атрибут может также использоваться для <textarea>. Кроме того, если значение будет установлено через атрибут value, то элемент станет недопустимым (invalid), если у нового значения будет длина, больше чем maxlength.
<input maxlength='10'>
<textarea maxlength='140'></textarea>
Как я могу отказаться от проверки?
Если у Вас есть своя собственная система для валидации формы, Вы, вероятно, должны иметь возможность отключить её когда браузер может сам управлять валидацией формы. Однако, у Вас могут быть какие-либо причины, почему Вы захотите отключить валидацию формы браузером. Серьезные основания для этого могут состоять в том, что если Вы хотите использовать некоторые новые типы input-ов, но при этом Вы не хотите проверять валидность их содержания.
Самый простой способ отказаться состоит в том, чтобы добавить атрибут novalidate для тега <form>. Вы можете также установить formnovalidate для Вашей кнопки «submit». Вы должны отдать предпочтение formnovalidate перед novalidate, если Вы хотите иметь одну кнопку «submit» для проверки валидности формы и другую без.
Как я могу определить свои правила валидации?
Вы можете сделать элемент недопустимым (invalid), вызвав .setCustomValidity (errorMsg). Эта функция принимает качестве параметра сообщение об ошибке. Вы можете передать пустую строку .setCustomValidity (''), если Вы хотите удалить пользовательскую ошибку.
С помощью этого метода Вы можете проверить, например, совпадает ли пароль в двух полях:
<script>
function checkPassword(p1, p2)
{
if (p1.value != p2.value) {
p2.setCustomValidity('Пароль не совпадает');
} else {
p2.setCustomValidity('');
}
}
</script>
<input type='password' id='p1'>
<input type='password' onfocus="checkPassword(document.getElementById('p1'), this);" oninput="checkPassword(document.getElementById('p1'), this);">
Как я могу изменить текст сообщения об ошибке?
Каждый тип ошибок может иметь строку, которая давала бы описание ошибки. Например, если <input> будет обязательным для заполнения и при этом не будет иметь никакого значения, то сообщение будет, «Пожалуйста, заполните это поле». Firefox пытается быть настолько умным насколько возможно, чтобы показать соответствующее сообщение об ошибке, но Вы, возможно, могли бы хотеть переопределить его в некоторых ситуациях, где правила очень сложны. Например:
<input type='email' required pattern='.*@company\.com'>
Вы могли бы предпочесть иметь простое сообщение «Пожалуйста, введите Ваш корпоративный адрес электронной почты.» вместо трех универсальных сообщений, зависящих от невыполненного ограничения.
Чтобы помочь с этим, можно использовать нестандартный атрибут x-moz-errormessage, который позволяет Вам определить сообщение об ошибке для данного поля формы. Независимо от ошибки, если x-moz-errormessage присутствует и отличается от пустой строки, это значение будет использоваться в качестве сообщения об ошибке вместо значения по умолчанию.
Этот атрибут нестандартный, поэтому должен использоваться осторожно. Кроме того, Вы должны знать, что .setCustomValidity() позволяет Вам косвенно устанавливать свое собственное сообщение об ошибке.
Как я могу изменить UI появляющейся ошибки ?
К сожалению, нет никакого способа изменить UI. Сообщение является часть браузера, и в настоящий момент нет возможно изменять стили браузера из контента. Это может измениться в будущем, но этого не будет для Firefox 4.
Если Вы считаете, что появляющееся сообщение уродливо, Вы должны иметь ввиду, что это не окончательный вариант. Разработчики попытаются улучшить это позже, см. баг 602500. Любые комментарии приветствуются!
Новые псевдоклассы CSS и стили по умолчанию
CSS3 UI представляет новые псевдоклассы, которые теперь использует HTML5, такие как :invalid :valid :required и :optional. Firefox 4 поддерживают все эти псевдоклассы и добавляет новый псевдокласс: :-moz-submit-invalid, который применяется для кнопки «submit», когда у формы есть не валидный элемент.
У :invalid есть стиль по умолчанию — это красный box-shadow. Этот стиль по умолчанию будет удален, когда :-moz-ui-invalid будет добавлен. Также Вы можете легко удалить этот дефолтный стиль в своих таблицах стилей:
:invalid {
box-shadow: none;
}
Примеры использования валидации формы.
