Submodule 9.3: Form validation

6. The input type="email" element

The below code creates the validation for the input type="email".

According to user's input, it displays the appropriate border color. It also displays the appropriate message in the span area with id "mailInfo".

The HTML code:

<div class = "required">
  <label for="mail">Your email:</label>
  <input type="email" name="mail" id="mail" 
      placeholder="Your email goes here" required />
  <span id="mailInfo"></span>
 </div>

and the JavaScript code:

<script>
  var mymail = document.getElementById("mail");
   var mymailInfo = document.getElementById("mailInfo");
  mymail.oninput = function () {
     if (!this.validity.valid) {
       mymail.style.border="solid 3px red";
       mymailInfo.innerHTML="Your email must be in the correct format. "
     }
     else {
       mymail.style.borderColor = "green";
       mymailInfo.style.display = "none"
     }
   }
</script>

will create an input displayed as: