HTML5 cross-browser front-end form validation

Form Validation is a huge headache for the front end of a transaction, especially in the face of complex forms, such as some input boxes only accept digital input, some fields are required, and some items must meet the input rules ... In order to provide a better user experience, these cumbersome requirements have to spend a lot of time and code to meet. In the new HTML5 standard, more than 10 form input types and attributes are added, such as autofocus automatic focus, and placeholder placeholders previously described. This intimate feature support frees up front-end developers and allows us to use a new tag element or attribute to accomplish a function that used to require a lot of JavaScript code.

The problem is, in HTML5 not yet popular today, especially in the domestic complex browser market environment, only use HTML5 to solve the problem of form verification these problems are inadequate. It is a question of how to make the page more semantic and to make our code more elegant and concise.

So the protagonist of this article shines debut! Sprinkle flower ~ ~ It is the famous JQuery Tools. It pursues minimalist style, the use of standard HTML5 syntax, no need to write additional JS code, in most browsers support HTML5, the direct removal of plug-ins can be very convenient.

Jab here, check demo.

1. E-mail input box

HTML5 has added an email type to the input tag to detect whether the input is in the form of an e-mail message. Older browsers that do not support new types simply think of them as a text box, and the user does not notice the change. Smartphone users should know that in the input boxes of those email addresses, there will be a more convenient keyboard input @. If you've ever used an IPhone or Android, you know.

<form method= "Get" > <label for= "email" > Email:</label> <input id= "email" name= "email" type= "Email" > <button> submit </button> </form>

2. URL Input Box

If you need to enter a URL, such as Http://www.lovelucy.info format, now can also be validated. And on the IPhone URL type input box will appear a changeable keyboard, users can easily enter the slash and. com, as shown in the figure on the right. (after testing found that Android does not have this change, the gap ah ... ）

<form method= "Get" > <label for= "url" > URL:</label> <input id= "url" name= "url" type= "url" > <button> Submit </button> </form>

3. Digital input Box

In the past to get a matching number, you had to use JQuery to help validate the input. HTML5 has added a number of types and added some additional attributes:

• Min: Specifies the minimum input number that the input box can accept.
• Max: You guessed right, which is the maximum number that is allowed to enter.
• Step: Property input domain legal interval, default is 1.

Similarly, on smartphones, we get a keypad with only a few digits, which is very handy. mobile phone on the number of keyboard, should be type= "Tel" type, the following figure (screenshot from Android4.0). Currently there is no browser support for the type of the input validation, the plugin is not supported.

<form method= "Get" > <label for= "number" > Age:</label> <input id= "number" name= "number" Type= "number" min= "max=" > <button> submit </button> </form>

HTML5 also has a new type called range, and the input box becomes a slider bar. It's cool that your form can use a visual slider if you don't need another plugin. The user is very lazy, drag with the mouse of course than the difficulty of tapping the keyboard convenient. It is the same as the number type, but only the type set type= "number" to Type= "range" can be.

4. Required Properties

The contents of the input box must be filled in, previously used Javascript to check. In HTML5, a new property is added: required, it's so convenient.

<form method= "POST" > <label for= "username" > Username: </label> <input id= "username" name= " Username "type=" text "placeholder=" username "required=" required "> <button> next </button> </form>

5. Regular expressions

In HTML5, we can even use regular expressions directly.

<form method= "POST" > <label for= "username" > User name: </label> <input type= "text" Name= " Username "id=" username "placeholder=" 4 <> "pattern=" [a-za-z]{4,10} "autofocus=" Autofocus "required=" required "> <button type=" Submit "> Next </button> </form>

6. Equivalent input box

data-equals to determine whether the two input box values are consistent, often used in the Password box 2 times input. This is not a HTML5 standard, but can be supported by Plug-ins.

<form method= "get" > <labe L for= "password1" > Input password:</label> <input id= "Password1" name= "password1" type= "password" > <label f Or= "Password2" > Reenter password:</label> <input id= "Password2" name= "password2" type= "password" Password1 "> <button> submit </button> </form> <script> $.tools.validator.fn (" [Data-equals] "," Different value and $1, function (input) {var name = input.attr ("Data-equals"), field = This.getinputs (). Filter ("[name=" + name + "]"); return Input.val () = = Field.val ()? true: [name]; }); The ' $ ' in the $.tools.validator.fn () parameter represents the value of the Data-equals </script>

Summarize

HTML5 Feature Support

New types supported by Plug-ins except for "text", "checkbox" and "Radio":

type	Description
Email	Only accept input in a valid Email address format
Number	Accept integer or floating-point decimal type input
Url	Only accept enter a valid URL address format

The range and date types of the HTML5 also have cross-browser support for the JQuery Tools plug-in, adding Rangeinput and Dateinput plug-ins. At the same time we can also use the jQuery selector: email,: number and: URL, very convenient.

HTML5 Property Support:

Properties	data type	description
max	number	The maximum value that the numeric type can enter. Valid for number, text, date, and range types.
number	> The minimum value that the numeric type can enter. Valid for number, text, date, and range types.
regular expression
requried	required"

Some of the older HTML4 properties are also supported by Plug-ins, but provide an enhanced, friendlier user experience:

Property	type	description
disabled	 
number
readonly

Custom error Prompt message

<input type= "number" min= "data-message=" Please enter a value greater than 10! "/>

For more plug-in configuration parameters, custom validation type, multi-language, Ajax server-side validation, etc., please refer to the official documentation.