Submodule 8.3: Form validation

5. The input type="text" element

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

It displays the appropriate png icons and the appropriate message in the span area with id  " firstnameInfo".

The HTML code: 

<div class = "required">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" class = "required"
placeholder="Your first name goes here"
autofocus="autofocus" minlength="4" required />
<span id="firstnameInfo"></span>
</div>

and the JavaScript code:

<script>
  var myfirsname = document.getElementById("firstname");
  var myfirstnameInfo = document.getElementById("firstnameInfo");
  myfirsname.oninput = function () {
  if (!this.validity.valid) {myfirsname.style.backgroundImage=     "url(images/invalid.png) " ;
    myfirsname.style.backgroundRepeat= " no-repeat";
    myfirsname.style.backgroundPosition= " right top";
    myfirstnameInfo.innerHTML = "Your name is too small."
  }
  else {
    myfirsname.style.backgroundImage= "url(images/valid.png) " ;
    myfirsname.style.backgroundRepeat= " no-repeat";
    myfirsname.style.backgroundPosition= " right top";
    myfirstnameInfo.style.display = "none";
  }
}
</script>

will create an input displayed as: