CODEWITHSUNDEEP
javascripthtmlcross-browservalidation
Tzury Bar Yochay
Tzury Bar Yochay

Reputation: 9004

What is the easiest way to determine whether `<input type="email"..` (for instance) is supported in current browser?

With HTML5, the following markup is just enough to get the browser handle input validation for one.

It will verify the input is matching an email address format as well as that it is actually provided:

<input id="email" name="email" type="email" placeholder="Email address" required/>

There is no need to hook on events, neither for the input box nor for the submit button, just fine.

I am looking for a way to decide whether browser already support this functionality or I should handle input validation myself.

I wonder if there is a way to get this straight forward, or shall I maintain a table of all possible brands-versions combinations and the supported flag.

Upvotes: 5

Views: 971

Answers (2)

Talha
Talha

Reputation: 19282

You can check the input type from modernizr library as mentioned by the 'Tzury' but here is the list of browsers and their versions which support the new html5 input elements.

Browser support for HTML5 Forms is growing, but limited. It appears that many browser vendors besides Opera have not put significant effort into their new form controls yet. However, the WebKit browsers have recently increased support for forms, perhaps because of the introduction of the iPhone and its virtual keyboard display, as we will see shortly. More advanced features such as validation are just being introduced. Table 7-1 summarizes the current state of HTML5 Forms support today.

enter image description here

Checking for browser support is less useful in the context of the new HTML5 Forms, as they have been designed to degrade gracefully in older browsers. Largely, this means that it is safe for you to use the new elements today, because older browsers will fall back to simple text field displays for any input types that they do not understand.

For Reference you can check this book on Amazon Apress Pro HTML5 Programming Sep 2010

Upvotes: -1

Tzury Bar Yochay
Tzury Bar Yochay

Reputation: 9004

As mentioned by @deceze, the detection technique is described in here and the tool is modernizr

if (!Modernizr.inputtypes.email) {
  // no native support for <input type="email"> :(
  // maybe build one yourself with Dojo or jQueryUI
}

Upvotes: 4

Related Questions