JavaScript HTML5 implements form validation _javascript tips

Form validation is a user experience optimization that detects invalid data and marks these errors for end users.

The following is a display of the browser's own validation features can also be viewed on the mobile side:

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 ("Please select Province");
          return false;
        }
      } else if (ele.name) {
        if (!ele.checkvalidity ()) {
          ele.focus ();
          return false;
    }} return true;
  }

The above is JavaScript combined with HTML5 to realize the form verification of all the code, I hope to help you learn.