Pure CSS3 code sharing for a good form validation 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 the Tel column we set up 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 state is invalid and 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 the input box status is focus and 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 is entered successfully, when 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 for forms, use the Novalidate property or the Formnovalidate property to turn off browser validation.

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




<form novalidate>    ...</form>

Formnovalidate is a property of the input element that 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?

You will need validity to view the current validation status:




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

As shown, the current validation status is: Customerror, which means that user-defined validation fails, and we can dynamically update the prompt based on these states. If the final validation succeeds, the valid in it 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 get the current error message via Validationmessage:

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.

<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>

• 
  

* {    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;}

• 
  

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

• 
  

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

• 
  

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

• 
  

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

• 
  

<form novalidate>    ...</form>

• 
  

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

• 
  

<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>

• 
  

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

• 
  

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 ');}    }

• 
  

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

•