Pure CSS3 for a good form verification effect

This is a series of additions to the basics of HTML5, and the others are:

• First, html5--new structural elements

• Ii. html5--figure, time, details, Mark

• Third, html5--details ingenious

• Iv. changes in existing elements of html5--

• Five, HTML5--Web Form

Today continue to learn about Web Forms related content, but today focus on the actual combat, the use of HTML5 form and css3-ui to achieve a good form effect.

The effect can be seen in the following motion diagram:

As an effect demonstration, we can do this today with just a few lines of CSS.

Pre-knowledge

• 1, HTML5 new Form type: tel, email, url (the previous article has introduced)

• 2. HTML5 Form Basic verification: Required Property

• 3. HTML5 form Custom Validation rule: Pattern property

Main introduction Content

• 1. Pseudo-class in CSS3 user interface module

• 2. Custom error messages

Body

Since it is a form, we have to have a basic form HTML structure, the following is the structure I created, the three forms are required fields, and for tel one column we set a custom validation rule: must be 11 digits.

<form> <ol>   <li>     <label for= "Tel" >Tel:</label>     <input type= "Tel" Required Name= "" Pattern= "\d{11}" id= "tel" >   </li>   <li>     <label for= "url" >website: </label>     <input type= "url" required name= "" id= "url" >   </li>   <li>     <label for= "Email" >Email:</label>     <input type= "email" required name= "" id= "email" >   </li>   <li>     <input type= "Submit" Name= "value=" Send the form ">   </li> </ol></ Form>

After the creation, the effect is as follows, and the difference between the feeling and the effect we want is great. This is the same root, ah, the same HTML, why this is so ugly.

Don't worry, we'll dress it slowly.

Use the simple rules below to beautify the form:

* {    margin:0;    font:13px Tahoma, Verdana, Sans-serif;    padding:0;} OL {    width:400px;    margin:50px;} Li {    clear:both;    List-style-type:none;    margin:0 0 10px;} Li:nth-last-child (1) {    text-align:center;} label {    display:block;    Float:left;    margin:0 10px 0 0;    padding:5px;    Text-align:right;    width:100px;} input {    border-radius:5px;    padding:5px 5px 5px 30px;    width:155px;} Input:focus {    outline:none;}

Now the effect is very good, but there is still a distance away from our goal, now we should consider the form verification of each link, the input box should look like. There are three cases in the above example:

• 1. When the input box is not activated

• 2. Input box activation (incorrect input)

• 3. Input box activation (input correct)

For the above three cases, there are three descriptions:

• 1, when not activated, must fill out a single display orange reminder

• 2. When activated, the input is not correct, the form is a dark red hint

• 3, when activated, the input is correct, the form is green through

With it is the change of three icons.

When we define the form state to complete the definition of the fact that we have a general effect, the code is to achieve the effect of the tool, below we see how to define:

First, the input box is not activated, and the input box status is invalid as well required :

input:invalid:required {    background-image:url (' nor.png ');    box-shadow:0 0 5px #f0bb18;    border:2px solid #f0bb18;}

The next is when the input box is activated, but no success has been entered, at this point the input box state is focus as well invalid :

input:focus:invalid {    background-image:url (' warn.png ');    box-shadow:0 0 5px #b01212;    border:2px solid #b01212;}

Finally, when the input box is activated, the form input succeeds, and the input box state is valid :

input:valid {    background-image:url (' suc.png ');    border:2px solid #7ab526;}

Finally, the Submit button is decorated:

Input[type= "Submit"] {    background: #7ab526;    Border:none;    box-shadow:0 0 5px #7ab526;    Color: #fff;    Cursor:pointer;    Font-weight:bold;    padding:7px;    width:150px;}

What's the good of it?

Without first introducing all the new CSS options, more CSS options need to be explored, and we can achieve such a good result with just a few of them.

The pseudo-classes we use are as follows:

• : valid--the form element after the content conforms to the element type and validates the pass, gets the class

• : invalid--If the contents of the form element are incorrect, it gets the class

• : required--Any form element that has a required attribute applies this class

Other outreach

1, does not trigger browser verification

If you do not want the browser to validate the form, use novalidate properties or formnovalidate properties to turn off browser validation.

novalidateThis is the form property that the form has, and any error hints and blank fields are ignored when the form is submitted.

<form novalidate>    ...</form>

formnovalidateis the attribute of the INPUT element, which can be set for a single form element.

<form> ...    <input type= "Submit" formnovalidate></form>

The above forms also do not trigger validation.

2. Custom Error Notification content

As you can see in the example above, the browser will validate our form, and the error message will pop up in the process. These validation messages are also different with the input.

Although we can't change the style of the cue box, we can use JavaScript's setCustomValidity() function to modify the error text:

<form>    <input oninput= "check ()" Type= "Tel" id= "tel" ></form><script>    function check () {        Tel = document.queryselector (' #tel ');        Tel.setcustomvalidity (' Please enter the correct 11-digit phone number ');    } </script>

Now, when we type, the hint becomes our custom:

Now there is a problem, the browser prompt is not the same, for the empty prompt and the wrong hint copy is not the same, so how should we separate processing it?

This is the time to validity view the current validation status:

Tel = document.queryselector (' #tel '); Console.log (tel.validity)

As shown, the current validation status is: customError , that is, user-defined validation failure, we can dynamically update the prompt information based on these states. If the final validation succeeds, it valid will become true.

function Check (EL) {    var validity = el.validity;    if (validity.valuemissing) {        el.setcustomvalidity (' This field is required ');    } else if (Validity.patternmismatch) {        El.setcustomvalidity (' input not conforming to format ');    } else {        el.setcustomvalidity (' incorrect input ');}    }

The above is just a demonstration, the actual scene time to replace their own prompt content.

Finally, you can validationMessage get the current error message by:

Console.log (el.validationmessage)//"Please fill in this field." "

Summarize

In this study, we did a simple and most common demo, and also introduced some details about the form validation decoration, although these things have been five years ago, but it is not too late to add basic knowledge.

Today, learning valid, invalid, required, the use of knowledge points, although small, but the effect is good, every learning has new discoveries, slowly accumulate.