01. JavaScript Φόρμες

JS Forms


Επικύρωση φορμών JavaScript

Η επικύρωση της φόρμας HTML μπορεί να γίνει από τη JavaScript.

Αν ένα πεδίο φόρμας (fname) είναι άδειο, αυτή η συνάρτηση δημιουργεί ένα μήνυμα ειδοποίησης και επιστρέφει false, για να αποτρέψει την υποβολή της φόρμας:

Παράδειγμα JavaScript

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

Η συνάρτηση μπορεί να καλείται όταν υποβάλλεται η φόρμα:

Παράδειγμα φόρμας HTML

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Δοκιμάστε τον εαυτό σας »


Η JavaScript μπορεί να επικυρώσει εισαγωγές αριθμών

Η JavaScript συχνά χρησιμοποιείται για την επικύρωση της εισαγωγής αριθμητικών:

Καταχωρίστε έναν αριθμό μεταξύ 1 και 10 και πατήστε “Υποβολή”

Δοκιμάστε τον εαυτό σας »


Αυτόματη επικύρωση φόρμας HTML

Η επικύρωση της φόρμας HTML μπορεί να γίνει αυτόματα από το πρόγραμμα περιήγησης:

Εάν ένα πεδίο φόρμας (fname) είναι κενό, το required χαρακτηριστικό αποτρέπει την υποβολή αυτής της φόρμας:

Παράδειγμα φόρμας HTML

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

Δοκιμάστε τον εαυτό σας »

Η αυτόματη επικύρωση φόρμας HTML δεν λειτουργεί στον Internet Explorer 9 ή σε παλαιότερη έκδοση του.


Επικύρωση δεδομένων

Η επικύρωση δεδομένων είναι η διαδικασία εξασφάλισης ότι η είσοδος χρήστη είναι καθαρή, σωστή και χρήσιμη.

Τυπικές εργασίες επικύρωσης είναι:

  • έχει ο χρήστης συμπληρώσει όλα τα υποχρεωτικά πεδία;
  • έχει εισάγει ο χρήστης μια έγκυρη ημερομηνία;
  • έχει εισάγει ο χρήστης κείμενο σε αριθμητικό πεδίο;

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

Η επικύρωση μπορεί να οριστεί με πολλές διαφορετικές μεθόδους και να αναπτυχθεί με πολλούς διαφορετικούς τρόπους.

Η επικύρωση από την πλευρά του διακομιστή (Server side validation) εκτελείται από έναν διακομιστή ιστού, μετά την αποστολή της εισόδου στο διακομιστή.

Η επικύρωση από την πλευρά του πελάτη (Client side validation) εκτελείται από ένα πρόγραμμα περιήγησης ιστού, πριν την αποστολή της εισόδου σε έναν διακομιστή ιστού.


Επικύρωση περιορισμών HTML

Το HTML5 εισήγαγε μια νέα έννοια επικύρωσης HTML που ονομάζεται επικύρωση περιορισμών (constraint validation)  .

Η επικύρωση περιορισμών HTML βασίζεται σε:

  • Επαλήθευση περιορισμών των Χαρακτηριστικών Εισόδου HTML (HTML Input Attributes)
  • Επαλήθευση περιορισμών CSS Pseudo Selectors
  • Επαλήθευση περιορισμών DOM Ιδιοτήτων και Μεθόδων (DOM Properties and Methods)

Επαλήθευση περιορισμών των Χαρακτηριστικών Εισόδου HTML 

ΧαρακτηριστικόΠεριγραφή
disabledΟρίζει ότι το στοιχείο εισαγωγής θα πρέπει να είναι απενεργοποιημένο
maxΚαθορίζει τη μέγιστη τιμή ενός στοιχείου εισαγωγής
minΚαθορίζει την ελάχιστη τιμή ενός στοιχείου εισαγωγής
patternΚαθορίζει το πρότυπο τιμής ενός στοιχείου εισαγωγής
requiredΚαθορίζει ότι το πεδίο εισαγωγής απαιτείται να συμπληρωθεί με ένα στοιχείο
type Καθορίζει τον τύπο ενός στοιχείου εισαγωγής

Για μια πλήρη λίστα, μεταβείτε στα Χαρακτηριστικά εισαγωγής HTML .


Επαλήθευση περιορισμών CSS Pseudo Selectors

ΕπιλογέαςΠεριγραφή
:disabledΕπιλέγει στοιχεία εισόδου με καθορισμένο το χαρακτηριστικό “disabled”
:invalidΕπιλέγει στοιχεία εισόδου με μη έγκυρες τιμές
:optionalΕπιλέγει στοιχεία εισόδου χωρίς καθορισμένο χαρακτηριστικό “required”
:requiredΕπιλέγει τα στοιχεία εισόδου με καθορισμένο χαρακτηριστικό “required”
:validΕπιλέγει στοιχεία εισόδου με έγκυρες τιμές

Για μια πλήρη λίστα, πηγαίνετε στις CSS Pseudo Classes .

Days
Hours
Minutes

01. JavaScript Φόρμες

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: