Как заставить работать атрибут required для input в старых версиях ie?

Отключение проверки

В некоторых случаях может потребоваться отключить проверку. Например, вы хотите протестировать свой серверный код на правильность обработки поступивших некорректных данных. Чтобы отключить проверку для всей формы, в элемент <form> добавляется атрибут novalidate:


Другой подход — это отключить проверку в кнопке для отправки формы. Такой способ иногда полезен в настоящей веб-странице. Например, вместо отправки, может быть, требуется сохранить наполовину заполненную форму для дальнейшего использования. Чтобы получить такую возможность, в элемент <input> соответствующей кнопки вставляется атрибут formnovalidate:

Обнаружение незаполненных полей — это только один из нескольких типов проверки. Позже мы рассмотрим обнаружение ошибок в данных разных типов.

What is form validation?

Go to any popular site with a registration form, and you will notice that they provide feedback when you don’t enter your data in the format they are expecting. You’ll get messages such as:

  • «This field is required» (You can’t leave this field blank).
  • «Please enter your phone number in the format xxx-xxxx» (A specific data format is required for it to be considered valid).
  • «Please enter a valid email address» (the data you entered is not in the right format).
  • «Your password needs to be between 8 and 30 characters long and contain one uppercase letter, one symbol, and a number.» (A very specific data format is required for your data).

This is called form validation. When you enter data, the browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the application. Validation done in the browser is called client-side validation, while validation done on the server is called server-side validation. In this chapter we are focusing on client-side validation.

If the information is correctly formatted, the application allows the data to be submitted to the server and (usually) saved in a database; if the information isn’t correctly formatted, it gives the user an error message explaining what needs to be corrected, and lets them try again.

We want to make filling out web forms as easy as possible. So why do we insist on validating our forms? There are three main reasons:

  • We want to get the right data, in the right format. Our applications won’t work properly if our users’ data is stored in the wrong format, is incorrect, or is omitted altogether.
  • We want to protect our users’ data. Forcing our users to enter secure passwords makes it easier to protect their account information.
  • We want to protect ourselves. There are many ways that malicious users can misuse unprotected forms to damage the application (see Website security).

    Warning: Never trust data passed to your server from the client. Even if your form is validating correctly and preventing malformed input on the client-side, a malicious user can still alter the network request.

Explicit Interface Implementations

Сопоставляет набор имен соответствующему набору идентификаторов диспетчеризации.Maps a set of names to a corresponding set of dispatch identifiers.

(Inherited from Attribute)

Возвращает сведения о типе объекта, которые можно использовать для получения сведений о типе интерфейса.Retrieves the type information for an object, which can be used to get the type information for an interface.

(Inherited from Attribute)

Возвращает количество предоставляемых объектом интерфейсов для доступа к сведениям о типе (0 или 1).Retrieves the number of type information interfaces that an object provides (either 0 or 1).

(Inherited from Attribute)

Предоставляет доступ к открытым свойствам и методам объекта.Provides access to properties and methods exposed by an object.

(Inherited from Attribute)

Notes

File inputs

Note: Starting in Gecko 2.0, calling the method on an element of type «file» opens the file picker and lets the user select files. See Using files from web applications for an example and more details.

You can’t set the value of a file picker from a script; doing something like the following has no effect:

var e = getElementById("someFileInputElement");
e.value = "foo";

Error messages

If you want Firefox to present a custom error message when a field fails to validate, you can use the attribute to do so:

<input type="email" x-moz-errormessage="Please specify a valid email address.">

Note, however, that this is not standard and will not have an effect on other browsers.

Атрибут formmethod

Атрибут formmethod указывает метод отправки данных формы на сервер. Атрибут formmethod переопределяет атрибут method элемента <form>. Атрибут formaction может применяться только с кнопкой отправки или изображения (type=»submit» или type=»image»). Значение атрибута formmethod по умолчанию — get. Синтаксис:

Значения атрибута formmethod

Значение Описание
get Объединяет данные формы в одну строку, присоединяет полученную строку к URL-адресу обработчика формы (указывается в атрибуте «action» или «formaction») и с помощью полученного URL-адреса передаёт данные формы на сервер. Достоинства и недостатки:
  • позволяет быстро получать результаты передачи форм с небольшим количеством информации;
  • некоторые сервера ограничивают длину URL-адреса с аргументами (обрезают часть URL-адреса с передаваемой информацией);
  • передача личных данных (пароли, номера банковских карт и т.д.) с помощью данного метода является небезопасной, так как такие данные могут быть легко перехвачены.
post Браузер устанавливает связь с сервером, на котором находится обработчик данных формы (URL-адрес обработчика указывается в атрибуте «action» или «formaction») и после установки связи передаёт (в отдельном сеансе связи) данные на сервер. Достоинства и недостатки:
  • в отличие от метода get данный метод является более безопасным в плане передачи личных данных;
  • данный метод позволяет передавать на сервер большие объёмы данных формы.

Окно поиска

Итак, поиск. Не только поиск от Google или Yahoo (ну, те тоже). Подумайте о любом окне поиска, на любой странице, на любом сайте. Амазон имеет окно поиска, Яндекс имеет окно поиска, большинство блогов тоже. Как они сделаны? <input type=»text»>, как и любое другое текстовое поле в сети. Давайте это исправим.

Поиск нового поколения

<form> <input name=»q» type=»search»> <input type=»submit» value=»Найти»> </form>


В некоторых браузерах вы не заметите никакого отличия от обычного текстового поля. Но если вы используете Safari на Mac OS X, это будет выглядеть так.

Нашли разницу? Поле ввода имеет закругленные углы! Я знаю, знаю, вы вряд ли можете сдержать свои чувства. Но подождите, это еще не все! Когда вы начнете вводить в поле type=»search» Safari вставит небольшую кнопку «x» с правой стороны окна. Нажатие на «x» очищает содержимое поля. Google Chrome, который имеет под капотом ту же технологию, ведет себя так же. Обе эти маленькие хитрости выглядят и ведут себя аналогично родному поиску в iTunes и других клиентских приложениях Mac OS X.

Apple.com использует <input type=»search»> для поиска по своему сайту, чтобы помочь сайту передать «маколюбное» ощущение. Но здесь нет ничего специфичного для Маков. Это просто код, так что каждый браузер на любой платформе может выбрать, как отображать в соответствии с соглашениями платформы. Как и со всеми другими новыми типами, браузеры, которые не признают type=»search» будут относиться к нему как type=»text», так что нет абсолютно никаких причин не начать использовать type=»search» для всех ваших окон поиска прямо сегодня.

Профессор Маркап говорит

По умолчанию Safari не применяет к большинство стилей. Если вы хотите заставить Safari понимать поле для поиска как обычное текстовое поле (чтобы применить собственные стили), добавьте это правило к вашей таблице стилей.

input { -webkit-appearance: textfield; }

Спасибо Джону Лейну за обучение меня этому трюку.

Intrinsic and basic constraints

In HTML5, basic constraints are declared in two ways:

  • By choosing the most semantically appropriate value for the attribute of the element, e.g., choosing the type automatically creates a constraint that checks whether the value is a valid e-mail address.
  • By setting values on validation-related attributes, allowing basic constraints to be described in a simple way, without the need for JavaScript.

Semantic input types

The intrinsic constraints for the attribute are:

Input type Constraint description Associated violation
The value must be an absolute URL, as defined in the URL Living Standard. TypeMismatch constraint violation
The value must be a syntactically valid email address, which generally has the format . TypeMismatch constraint violation

For both of these input types, if the attribute is set, several values can be set, as a comma-separated list, for this input. If any of these do not satisfy the condition described here, the Type mismatch constraint violation is triggered.

Note that most input types don’t have intrinsic constraints, as some are simply barred from constraint validation or have a sanitization algorithm transforming incorrect values to a correct default.

Validation-related attributes

In addition to the attribute described above, the following attributes are used to describe basic constraints:

Attribute Input types supporting the attribute Possible values Constraint description Associated violation
, , , , , A JavaScript regular expression (compiled with the ECMAScript 5 , , and flags disabled) The value must match the pattern. constraint violation
, A valid number The value must be greater than or equal to the value. constraint violation
, , A valid date
, , A valid date and time
, A valid number The value must be less than or equal to the value constraint violation
, , A valid date
, , A valid date and time
, , , , , , , , , , , , , , , ; also on the and elements none as it is a Boolean attribute: its presence means true, its absence means false There must be a value (if set). constraint violation
An integer number of days Unless the step is set to the literal, the value must be min + an integral multiple of the step. constraint violation
An integer number of months
An integer number of weeks
, , An integer number of seconds
, An integer
, , , , , ; also on the element An integer length The number of characters (code points) must not be less than the value of the attribute, if non-empty. All newlines are normalized to a single character (as opposed to CRLF pairs) for . constraint violation
, , , , , ; also on the element An integer length The number of characters (code points) must not exceed the value of the attribute. constraint violation

JavaScript

JS Array concat() constructor copyWithin() entries() every() fill() filter() find() findIndex() forEach() from() includes() indexOf() isArray() join() keys() length lastIndexOf() map() pop() prototype push() reduce() reduceRight() reverse() shift() slice() some() sort() splice() toString() unshift() valueOf()

JS Boolean constructor prototype toString() valueOf()

JS Classes constructor() extends static super

JS Date constructor getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() now() parse() prototype setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toISOString() toJSON() toLocaleDateString() toLocaleTimeString() toLocaleString() toString() toTimeString() toUTCString() UTC() valueOf()

JS Error name message

JS Global decodeURI() decodeURIComponent() encodeURI() encodeURIComponent() escape() eval() Infinity isFinite() isNaN() NaN Number() parseFloat() parseInt() String() undefined unescape()

JS JSON parse() stringify()

JS Math abs() acos() acosh() asin() asinh() atan() atan2() atanh() cbrt() ceil() cos() cosh() E exp() floor() LN2 LN10 log() LOG2E LOG10E max() min() PI pow() random() round() sin() sqrt() SQRT1_2 SQRT2 tan() tanh() trunc()

JS Number constructor isFinite() isInteger() isNaN() isSafeInteger() MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY prototype toExponential() toFixed() toLocaleString() toPrecision() toString() valueOf()

JS OperatorsJS RegExp constructor compile() exec() g global i ignoreCase lastIndex m multiline n+ n* n? n{X} n{X,Y} n{X,} n$ ^n ?=n ?!n source test() toString() (x|y) . \w \W \d \D \s \S \b \B \0 \n \f \r \t \v \xxx \xdd \uxxxx

JS Statements break class continue debugger do…while for for…in for…of function if…else return switch throw try…catch var while

JS String charAt() charCodeAt() concat() constructor endsWith() fromCharCode() includes() indexOf() lastIndexOf() length localeCompare() match() prototype repeat() replace() search() slice() split() startsWith() substr() substring() toLocaleLowerCase() toLocaleUpperCase() toLowerCase() toString() toUpperCase() trim() valueOf()

Constraint validation process

Constraint validation is done through the Constraint Validation API either on a single form element or at the form level, on the element itself. The constraint validation is done in the following ways:

  • By a call to the or method of a form-associated DOM interface, (, , , or ), which evaluates the constraints only on this element, allowing a script to get this information. The method returns a Boolean indicating whether the element’s value passes its constraints. (This is typically done by the user-agent when determining which of the CSS pseudo-classes, or , applies.) In contrast, the method reports any constraint failures to the user.
  • By a call to the or method on the interface.
  • By submitting the form itself.

Calling is called statically validating the constraints, while calling or submitting the form is called interactively validating the constraints.

Note:

  • If the attribute is set on the element, interactive validation of the constraints doesn’t happen.
  • Calling the method on the interface doesn’t trigger a constraint validation. In other words, this method sends the form data to the server even if doesn’t satisfy the constraints. Call the method on a submit button instead.

Подсказывающий текст

Поддержка подсказывающего текста
IE Firefox Safari Chrome Opera iPhone Android
4.0+ 4.0+ 4.0+ 11.0+ 4.0+

Первое улучшение HTML5 относительно форм это возможность установки подсказывающего текста в поле ввода. Такой текст отображается в поле ввода, если поле пустое и у него нет фокуса. Как только вы щелкните в поле ввода (или перейдете к нему через Tab) подсказывающий текст исчезает.

Вы, наверное, видели подсказывающий текст ранее. Например, Mozilla Firefox включает подсказывающий текст в адресной строке с надписью «Поиск в закладках и журнале».

Когда вы щелкаете по адресной строке, подсказывающий текст исчезает.

Вот как вы можете включить подсказывающий текст в свои формы.

<form> <input name=»q» placeholder=»Поиск в закладках и журнале»> <input type=»submit» value=»Поиск»> </form>


Браузеры, которые не поддерживают атрибут placeholder, его просто игнорируют. Без вреда и нарушений.

Спроси профессора Маркапа

☞В. Могу я использовать HTML разметку для атрибута ? Я хочу вставить картинку или, может, изменить цвета.

О. Атрибут может содержать только текст, никакого HTML-кода. Однако есть специальные расширения CSS, которые позволяют вам установить стиль текста в некоторых браузерах.

Числа в виде ползунка

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

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

<input type=»range» min=»0″ max=»10″ step=»2″ value=»6″>

Все доступные атрибуты такие же, как и у type=»number» — min, max, step, value — и означают то же самое. Единственное отличие состоит в пользовательском интерфейсе. Вместо поля для ввода, браузеры, как ожидается, отображают type=»range» в виде ползунка. На момент написания последние версии Safari, Chrome и Opera работали с этим. К сожалению, iPhone отображает в виде простого текстового поля, он даже не оптимизирует свою экранную клавиатуру для ввода чисел. Все остальные браузеры просто рассматривать поле как type=»text», поэтому нет никаких причин начать использовать этот тип немедленно.

Атрибуты валидации

Последнее обновление: 31.10.2015

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

Атрибут Required

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

Чтобы при валидации мы не получали несуразных сообщений об ошибке, этот атрибут позволяет настроить текст сообщения:

public class Book
{
    
    public virtual int Id { get; set; }

    
    
    public virtual string Name { get; set; }

    
    
    public virtual string Author { get; set; }

    
    
    public virtual int Year { get; set; }
}

Таким образом, если мы явным образом не установим текст сообщения, то при выводе ошибки будет отображаться стандартный текст сообщения.

Атрибут StringLength

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

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

    public class Book
    {
        
        public virtual int Id { get; set; }

        
        
        
        public virtual string Name { get; set; }

        
        
        
        public virtual string Author { get; set; }

        
        
        public virtual int Year { get; set; }
    }
	

Атрибут RegularExpression

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

+@+\.{2,4}", ErrorMessage = "Некорректный адрес")]
public virtual string Email { get; set; }

Если введенное значение не будет соответствовать регулярному выражению, то будет отображено сообщение об ошибке

Атрибут Range

Атрибут Range определяет минимальные и максимальные ограничения для числовых данных.



public virtual int Year { get; set; }

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


public decimal Price { get; set; }

Атрибут Remote

Атрибут Remote в отличие от предыдущих атрибутов находится в пространстве имен System.Web.Mvc. Он позволяет выполнять валидацию на стороне клиента с обратными вызовами на сервер.

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


public string UserName { get; set; }

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

public JsonResult CheckUserName(string username)
{
    var result = Membership.FindUsersByName(username).Count == 0;
    return Json(result, JsonRequestBehavior.AllowGet);
}

Это действие контроллера принимает в качестве параметра имя свойства, подлежащего валидации, и возвращает true или false в форме объекта в формате JSON.

Атрибут Compare

Атрибут Compare также находится в пространстве имен System.Web.Mvc. Он гарантирует, что два свойства объекта модели имеют одно и то же значение. Если, например, надо, чтобы пользователь ввел пароль дважды:


public virtual string Password { get; set; }



public  virtual string PasswordConfirm { get; set; }

Если пользователь введет второй раз другой пароль, отличный от первого, то он увидит ошибку:

НазадВперед

О наболевшем, о Internet Explorer

Для нормальных браузеров, к которым можно отнести Firefox, Opera и Google Chrome, эта задача относительно легка. Даже давние версии этих браузеров одинаково хорошо отображают html-код, если в нем конечно же не используются какие-то новые технологии. Но чтобы добиться подобного в браузерах семейства Internet Explorer, требуются просто титанические усилия.

Каждая версия браузера Internet Exlorer обладает своей, уникальной тупостью. Что работает в IE6, может как положено не работать в IE7 и наоборот. Этот зоопарк компании Microsoft не удалось побороть даже в самой последней версии своего браузера.


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

Поэтому мне, как web-разработчику, приходится выступать некоторой «прослойкой» между капризными браузерами и требующими знаний и зрелищ посетителями сайтов. И замечательно, что web-разработчикам пока это удается.

Числа как счетчики

Следующий шаг: числа. Запрос числа более сложен, чем запрос адреса электронной почты или веб-адреса. Прежде всего, числа сложнее, чем вы думаете. Быстро выберите число. -1? Нет, я имел в виду число между 1 и 10,7 ½? Нет, нет, не дробь, тупица. π? Теперь вы просто выбрали иррациональное число.

Хочу заметить, у вас не часто спрашивают «просто число». Более вероятно, что будут просить число в определенном диапазоне. Вы можете только захотеть, чтобы в пределах этого диапазона были определенные типы чисел — может быть, целые числа, но не дроби или десятичные числа или что-то более экзотическое, например, кратные 10. HTML5 все это охватывает.

Выбрать число, почти любое

<input type=»number» min=»0″ max=»10″ step=»2″ value=»6″>

Рассмотрим по одному атрибуту.

  • type=»number» означает, что это числовое поле.
  • min=»0″ указывает минимально допустимое значение для этого поля.
  • max=»10″ является максимально допустимым значением.
  • step=»2″ в сочетании с минимальным значением определяет допустимые числа в диапазоне: 0, 2, 4 и так далее, вплоть до максимального значения.
  • value=»6″ значение по умолчанию. Должно выглядеть знакомым, этот же атрибут всегда используется для определения значений полей формы. Я упоминаю здесь об этом для отправной точки, что HTML5 основывается на предыдущих версиях HTML. Вам не нужно переучиваться, чтобы делать то, что вы уже делали.

Это код числового поля. Имейте в виду, что все эти атрибуты являются необязательными. Если у вас задан минимум, но не максимум, можете указать атрибут min, но не max. По умолчанию значение шага равно 1 и вы можете опустить атрибут step, пока не понадобится другое значение шага. Если нет значения по умолчанию, то атрибут value может быть пустой строкой или даже вообще опущен.

Но HTML5 не останавливается на достигнутом. За ту же самую низкую, низкую цену свободы вы получаете эти удобные методы JavaScript.

  • input.stepUp(n) повышает значение поля на n.
  • input.stepDown(n) понижает значение поля на n.
  • input.valueAsNumber возвращает текущее значение как число с плавающей точкой (свойство input.value это всегда строка).

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

В настольной версии Оперы поле type=»number» отображается как счетчик с небольшими стрелками вверх и вниз, которые можно нажать для изменения значений.

Опера уважает атрибуты min, max и step, поэтому вы всегда добьетесь приемлемого числового значения.  Если вы увеличите значение до максимума, стрелка вверх в счетчике становится серой.

Как и со всеми другими полями ввода, что я обсуждал в этой главе, браузеры, которые не поддерживают type=»number», будут относиться к нему как к type=»text». Значение по умолчанию будет отображаться в поле (так как оно хранится в атрибуте value), но другие атрибуты, такие как min и max будут игнорироваться. Вы можете свободно реализовать их самостоятельно или использовать JavaScript-фреймворк, который уже реализует управление счетчиком. Вначале проверьте встроенную поддержку HTML5, как здесь.

if (!.inputtypes.number) { // нет встроенной поддержки для поля type=number // может попробовать Dojo или другой JavaScript-фреймворк }

Using built-in form validation

One of the most significant features of HTML5 form controls is the ability to validate most user data without relying on JavaScript. This is done by using validation attributes on form elements. We’ve seen many of these earlier in the course, but to recap:

  • : Specifies whether a form field needs to be filled in before the form can be submitted.
  • and : Specifies the minimum and maximum length of textual data (strings)
  • and : Specifies the minimum and maximum values of numerical input types
  • : Specifies whether the data needs to be a number, an email address, or some other specific preset type. 
  • : Specifies a regular expression that defines a pattern the entered data needs to follow.

If the data entered in a form field follows all of the rules specified by the above attributes, it is considered valid. If not, it is considered invalid.

When an element is valid, the following things are true:

  • The element matches the CSS pseudo-class, which lets you apply a specific style to valid elements.
  • If the user tries to send the data, the browser will submit the form, provided there is nothing else stopping it from doing so (e.g., JavaScript).

When an element is invalid, the following things are true:

  • The element matches the CSS pseudo-class, and sometimes other UI pseudo-classes (e.g., ) depending on the error, which lets you apply a specific style to invalid elements.
  • If the user tries to send the data, the browser will block the form and display an error message.

С этим читают