Javascripthtml5 implements Form Verification _ javascript skills

This article describes in detail the specific code of javascripthtml5 to implement form verification. If you are interested, refer to form verification for end users to detect invalid data and mark these errors, is an optimization of user experience.

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

HTML section:

  
   
   Html5 Form Verification

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
 
  

  
The above is all the code for javascript and html5 form verification. I hope it will be helpful for your learning.