Υποενότητα 9.3 Επικύρωση φόρμας

Το στοιχείο input type="text"

Ο παρακάτω κώδικας δημιουργεί την επικύρωση για την input type="text". 

Εμφανίζει τα κατάλληλα png εικονίδια και το κατάλληλο μήνυμα στην περιοχή span με id "firstnameInfo".

Ο κώδικας HTML: 

<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>

και ο κώδικας the JavaScript:

<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>

θα δημιουργήσουν μια σελίδα που εμφανίζεται ως: