Submodule 8.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: