Html5 form verification, html5 form

Html5 form verification, html5 form

Form Verification is an optimization of user experience when end users detect invalid data and mark these errors.

The following shows the browser's built-in verification function that can be viewed on the mobile terminal:

HTML section:

<! DOCTYPE html> 
CSS section:
　　 fieldset{border: 0;}    .myform .form-control{        display: block;        padding: 5px;        width: 100%    }    .myform input:focus:invalid + .form-error{        display: inline;    }    .myform .form-error{        display: none;        position: absolute;         margin-top: .7em;        padding: 1px 2px;        color: #fff;        font-size: .875rem;        background: #f40;    }    .myform .form-error:after{        position: absolute;        content: "";        top: -.5em;        left: .5em;        z-index: 100;        display: inline-block;        width: 0;        height: 0;        vertical-align: middle;        border-bottom: .5em solid #f40;        border-right: .5em solid transparent;        border-left: .5em solid transparent;        border-top: 0 dotted;        transform: rotate(360deg);        overflow: hidden;    }    .btn{        padding: 5px 20px;     }
JavaScript section:
Function checkForm () {var myform = document. getElementById ("formValid"); return check (myform. elements);} function check (eles) {var ele; for (var I = 0; I <eles. length; I ++) {ele = eles [I]; if (ele. nodeName = "SELECT") {if (! Ele. selectedIndex) {alert ("select Province"); return false ;}} else if (ele. name) {if (! Ele. checkValidity () {ele. focus (); return false ;}} return true ;}