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

Site: ΕΛ/ΛΑΚ Moodle
Course: Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου
Book: Υποενότητα 9.3 Επικύρωση φόρμας
Printed by: Guest user
Date: Friday, 13 December 2024, 7:59 AM

Description

  • HTML validation
  • JavaScript validation

Η ιδέα!

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

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

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

Η επικύρωση HTML

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

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

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

Άσκηση

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

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

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

Το HTML ελέγχει αυτές τις τιμές.

Άσκηση

  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" δεν είναι έγκυρη, η φόρμα θα εμφανίσει το κατάλληλο εικονίδιο και μήνυμα

JavaScript in input="text" validation/ invalid

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

JavaScript in input="text" validation/ valid

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

JavaScript in input="email" validation/ invalid

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

JavaScript in input="email" validation/ valid

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

JavaScript textarea validation/ invalid

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

JavaScript textarea validation/ valid

Το στοιχείο 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 (π.χ. προσθέστε ένα νέο στοιχείο φόρμας).

Κώδικας: