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

Προσθήκη λειτουργιών JavaScript

Θα χρησιμοποιήσουμε τη JavaScript για να προσθέσουμε περισσότερη λειτουργικότητα στη φόρμα μας.

Εδώ θα μάθουμε να χρησιμοποιούμε το συμβάν "oninput" για να ελέγξουμε την είσοδο του χρήστη.

Επίσης, θα χρησιμοποιήσουμε την ιδιότητα this.validity.valid. Κάθε φορά που ο χρήστης γράφει κάτι στο πεδίο, η ιδιότητα αυτή ελέγχει αν ικανοποιουνται οι απαιτήσεις. Χρησιμοποιώντας την, είμαστε σε θέση να δώσουμε άμεσες πληροφορίες στο χρήστη και τις απεικονίσουμε.

myid.oninput = function () {
  if (!this.validity.valid) {
    /*do this*/
  }
  else {
    /*do that*/
  }
}

Όταν η input="text" δεν είναι έγκυρη, η φόρμα θα εμφανίσει το κατάλληλο εικονίδιο και μήνυμα

ενώ όταν γίνει έγκυρη, θα εμφανιστεί κατάλληλο εικονίδιο και το μήνυμα θα εξαφανιστεί

Όταν η input="email" δεν είναι έγκυρη, το περίγραμμα θα έχει το το κατάλληλο χρώμα και θα εμφανιστεί

ενώ όταν γίνει έγκυρη, το χρώμα του περιγράμματος θα αλλάξει και το μήνυμα θα εξαφανιστεί μήνυμα

Όταν η textarea  δεν είναι έγκυρη, το περίγραμμα θα έχει το το κατάλληλο χρώμα και θα εμφανιστεί μήνυμα

ενώ όταν γίνει έγκυρη, το χρώμα του περιγράμματος θα αλλάξει και το μήνυμα θα εξαφανιστεί μήνυμα