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

Η ιδέα!

Ο κύριος λόγος για τον οποίο χρησιμοποιούμε τη JavaScript στις φόρμες είναι επειδή μας επιτρέπει να πραγματοποιούμ ακριβή επικύρωση των εισροών του χρήστη. Είναι σημαντικό να βεβαιωθούμε ότι οι πληροφορίες που έχει εισάγει είναι σωστές και ολοκληρωμένες.

Συχνά οι φόρμες έχουν απαιτούμενα πεδία, πεδία που χρειάζονται μια διεύθυνση ηλεκτρονικού ταχυδρομείου και πεδία όπου ο χρήστης πρέπει να εισάγει δύο φορές αντίστοιχες πληροφορίες (π.χ. πεδία κωδικού πρόσβασης). Σε όλες αυτές τις περιπτώσεις, είναι σημαντικό να ενημερώνεται αμέσως ο χρήστης σχετικά με τις απαιτήσεις και αν έχει τις εκπληρώσει, πριν υποβάλει το έντυπο.

Το HTML5 είναι πολύ χρήσιμο για την επικύρωση μιας φόρμας, ωστόσο, υπάρχουν ορισμένα πεδία όπου απαιτείται JavaScript.

Η επικύρωση HTML

Το HTML παρέχει για το στοιχείο input="text" επικύρωση, απαιτεί το πεδίο να συμπληρωθεί με τουλάχιστον ένα χαρακτήρα.

Το HTML παρέχει για το στοιχείο input="email" επικύρωση,  απαιτεί το χαρακτήρα "@", έναν χαρακτήρα πριν και έναν χαρακτήρα μετά από αυτό.

Η textareaμπορεί να υποβληθεί κενή, ακόμα κι αν είναι απαιτητή.

Άσκηση

1. Ανοίξτε το αρχείο exersice09.2.html στο πρόγραμμα περιήγησής σας και πειραματιστείτε με την υπάρχουσα επικύρωση.

Εμπλουτισμός της επικύρωσης HTML

Έχουμε προσθέσει την ιδιότητα - attribute minlength="4" στο στοιχείο input="text" και στο στοιχείο "textarea".

Άσκηση

1. Ανοίξτε το αρχείο  exersice09.2.html στον επεξεργαστή κώδικα και αποθηκεύστε το ως exersice09.3.03.htmlστον φάκελο "Exercises".
2. Προσθέσει την ιδιότητα - attribute minlength="4" στο στοιχείο input="text" και στο στοιχείο "textarea".
3. Αποθηκεύστε το αρχείο και κάντε προεπισκόπηση του στο πρόγραμμα περιήγησής σας. Πειραματιστείτε με την επικύρωση.

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

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

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

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

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

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

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

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

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

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

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

Το στοιχείο 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>

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

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

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

Σύμφωνα με την είσοδο του χρήστη, εμφανίζει το κατάλληλο χρώμα περιγράμματος. Εμφανίζει επίσης το κατάλληλο μήνυμα στην περιοχή span με το id "mailInfo"

Ο κώδικας HTML:

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

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

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

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

Το στοιχείο textarea

Ο παρακάτω κώδικας δημιουργεί την επικύρωση για την textarea.

Σύμφωνα με την είσοδο του χρήστη, εμφανίζει το κατάλληλο χρώμα περιγράμματος. Εμφανίζει επίσης το κατάλληλο μήνυμα στην περιοχή span με id "feedbackInfo".

Ο κώδικας HTML:

<div class = "required">
  <p>Please enter any feedback you have.</p>
  <textarea name="feedback" id="feedback" 
     placeholder ="Your feedabck goes here" 
     rows="3" cols="60" minlength="4" required></textarea>
  <span id="feedbackInfo" ></span>
</div>

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

<script>
  var myfeedback = document.getElementById("feedback");
  var myfeedbackInfo = document.getElementById("feedbackInfo");
  myfeedback.oninput = function () {
    if (!this.validity.valid) {
      myfeedback.style.border="solid 3px red";
      myfeedbackInfo.innerHTML="Your feedback must include at least 4 characters."
    }
    else {
      myfeedback.style.borderColor = "green";
      myfeedbackInfo.style.display = "none"
    }
}
</script>

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

Άσκηση

Περισσότερες πληροφορίες: https://www.w3schools.com/js/js_validation_api.asp

Άσκηση

1. Κάντε λήψη του φακέλου  valid.zip και extract/unzip τον τόσο στον φάκελο "exercises/images" όσο και στο φάκελο "chocolate/images". Αυτός ο φάκελος zip περιλαμβάνει τα εικονίδια valid.png και invalid.png.
2. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ωςs exersice09.3.html στον φάκελο "Exercises".
3. Αντιγράψτε τον παρακάτω κώδικα και επικολλήστε τον στο νέο αρχείο. Αυτός ο κώδικας περιλαμβάνει όλα όσα εξηγήσαμε σε αυτήν την ενότητα.
4. Αποθηκεύστε το αρχείο. Είναι όλα καλά? Μπορείτε να πειραματιστείτε είτε με τη Javascript είτε με το HTML (π.χ. προσθέστε ένα νέο στοιχείο φόρμας).

Κώδικας: