HTML5 comes with table form verification experience optimization and prompt bubble modification function

When many friends do form verification, they use jQuery or JS manually, or use the jQuery plug -in to verify. Because everyone thinks that HTML5 comes with authentication is not very good! In fact, now HTML5 comes with formulating form verification, which is now quite powerful. Let's take a look at a form to verify it in a form written by pure HTML5! Experience!

What do you think of this effect?

The essence of this effect is three pictures!

 .myform select: required, .myform input: required, .myform textarea: required {background: #fff (http://sandbox.runjs.cn/rs/RS/216/0y 89gzo2/Star.jpg) No-Repeat 99 % Center;}. Myform select: required: value,. Myform input: Required: Valid,. Myform Textarea: Required: Valid {background: #fff (http:// sandbox .runjs.cn/uploads/RS/216/ 0Y89GZO2/Right.png) No-Repeat 99% Center; Box-Shadow: 0 0 5px #5CD053; Border-COLOR: #28921F;}. US: Invalid, .myform textarea : Focus: Invalid {Background: #fff URL (http://sandbox.runjs.cn/uploads/RS/216/0y89gzo2/error.png) No-Repeat 99% Center; Box-shadow: 0 5px #d45252; border-color: #B03535}

Then did a monitoring event:

 Oninvalid = this.setCustomValidity ('Please enter the correct number'); oninput = setcustomvalidity ('')

When the verification password is consistent, use a js

 Function Checkpassword () {var Pass1 = Document.GetelementByid (Password); var passert ss2.Value) Pass2.SetCustomValidity (not matching the passwords in two inputs); Else pass2.setCustomValidity ();}

This completes the effect!

If you think, this built -in bubble is also ugly! As shown below: I want to change it!

Before the version of Google 29, we can use pseudo -elements to modify the bubbles!

 : -WEBKIT-VALIDATION-BUBBLE {min-width: 152px; margin-top: -1px;} :: -weBkit-Validation-Bubble-Rader: 1px solid #F7ce39; background: #FFFBC7; /* Position: Relacted; */ Top: 4px; left: 0px;} :: -webkit-validation-bubble-errow-clipper {text-align: center;} :: olor: #444;} : -WEBKIT-Validation-Bubble-Message {border: 1px solid #f7ce39; background: #fffbc7; border-radius: 3px;} :: XT-BLOCK {font-size: 12px;}

But, this method was abandoned later! You will find that there is no response to modifying the bubble! So how to modify the bubble style? It's a little troublesome here! The idea is probably that we first stop the default bubbles and then create a new bubble!

 <FORM> <input Required> <Button> Submit </Button> </Form> <Script> Document.quryselector (Input) .adDeventListener (incret, function) {event.prev ENTDEFAULT ();}); </script "

The code is roughly as follows:

 Function Replacevalidationui (Form) {// Prevent bubbles from bubbles. i, Android browser // The default submission form form. AddeventListener (submit, function (event) {if (! This.Checkvalidity ()) {event.preventDefault ();}); // The container form.insertadjacenthtml (AFT erBegin, <ul class = 'error- Messages'> </ul>); VAR SubmitButton = Form.queryselector (Button: Not ([Type = Button]), input [Type = Submit]); ICK, Function (EVENT) {Var InvalidFields = FORM .qurySelectOlLL (: Invalid), Listhtml =, ErrorMessages = Form.queerySelector (.err-Messages), label; for (var I = 0; I <invalidfields.Length; I ++) {label = form.queryselector (label [for = + infields [i] .id +]); Listhtml + = <li> + label.innerHtml + + InvalidFields [i]. ValidationMessage + </li>;} ages.innerhtml = Listhtml; // Select the first error input // Error information container display if (invalidFields.Length> 0) {invalidField [0] .focus (); errorMessages.style.display = BLOCK;}) ;} // Replace all the verification uIVAR forms = document.quryselectiverall (form); for (var I = 0; I <forms.length; i ++) {replacevalidationui (forms [i]);}

The above is the HTML5 comes with the HTML5 comes to verify the experience optimization and the prompting bubble modification function. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!