HTML5 form validation

Share

Με την έλευση της HTML5 και του CSS3 έχουμε τη δυνατότητα να φτιάξουμε πιο εύκολα όμορφες σελίδες στο internet και δυνατές web εφαρμογές χωρίς να είναι αναγκαία η χρήση επιπλέον τεχνολογιών όπως flash και silverlight.

Οι HTML φόρμες υποστηρίζουν νέους τύπους πεδίων, κάτι που διευκολύνει τον προγραμματιστή αφού πλέον ο έλεγχο εγκυρότητας των δεδομένων γίνεται από τον browser. Με τη χρήση των νέων λειτουργιών μπορούμε να φτιάξουμε μία web φόρμα και έχουμε και τη δυνατότητα να έχουμε έλεγχος εγκυρότητας των δεδομένων στον client (browser) χωρίς javascript.

Βήμα 1: HTML

Αρχικά, ας σχεδιάσουμε μία απλή web φόρμα με λίγα πεδία. Θα βάλουμε ένα πεδίο για το όνομα, επίθετο, email, ηλικία και χόμπυ. Για να ορίσουμε στη φόρμα μας ποια πεδία είναι υποχρεωτικά, απλά βάζουμε το attribute required μέσα στο <input> tag. Επίσης, θέλουμε να βάλουμε μία μικρή φράση σε κάθε πεδίο που νε εξηγεί τη χρήση του. Με την HTML5 αυτό είναι αρκετά απλό και γίνεται με το attribute placeholder με τιμή τη φράση που θέλουμε. Δείτε παρακάτω πως θα μπορούσε να είναι το πεδίο για το Επίθετο.

<div class="form_row">
    <label for="lname">
        Επίθετο</label>
    <div class="input">
        <input type="text" name="lname" class="textbox" required="" placeholder="Συμπληρώστε το επίθετο σας..." />
    </div>
</div>

Για το πεδίο του email χρειαζόμαστε έναν τρόπο να κάνουμε έναν έλεγχο ότι το email που δόθηκε είναι σωστό. Με την HTML5 έχουμε νέους τύπους για τα <input> tags και ένας από αυτούς είναι το email. Ορίζοντας το attribute να είναι email και όχι text, τον έλεγχο το αναλαμβάνει ο ίδιος ο browser.

Για το πεδίο της ηλικίας θα βάλουμε στο attribute type τη τιμή number. Έτσι στο πεδίο αυτό ο χρήστης μπορεί να συμπληρώσει κάποιον αριθμό. Επίσης έχουμε τη δυνατότητα να βάλουμε min και max τιμές για το πεδίο αυτό.

<div class="form_row">
    <label for="email">
        Email</label>
    <div class="input">
        <input type="email" name="email" class="textbox" required="" placeholder="[email protected]" />
    </div>
</div>

Βήμα 2: CSS

Αφού έχουμε φτιάξει τη φόρμα μας χρειάζεται να την μορφοποιήσουμε λίγο. Πέρα από το βασικό styling που πρέπει να κάνουμε, μπορούμε μόνο με css να δείξουμε στον χρήστη τι πρέπει να συμπληρώσει και τι πρέπει να διορθώσει στη φόρμα που συμπληρώνει. Μπορούμε λοιπόν να εκμεταλλευτούμε τις ψευδοκλάσεις (pseudo classes) που υπάρχουν στο CSS3. Οι pseudo classes που θα χρησιμοποιήσουμε είναι οι παρακάτω:

• focus Ένα πεδίο που ο χρήστης έχει κάνει κλικ.
• not(:focus) Το αντίθετο του παραπάνω state.
• required Όσα πεδία είναι υποχρεωτικά, δηλαδή όσα πεδία έχουν το required attribute.
• valid Όσα πεδία έχουν σωστές τιμές (π.χ. type=email), και όσα required πεδία που έχουν τιμή.
• invalid Όσα πεδία έχουν λάθος τιμές και όσα required πεδία που δεν έχουν τιμή

Εδώ πρέπει να αναφέρουμε πως οι pseudo classes ορίζονται όταν η σελίδα φορτώνει. Επίσης, έχουμε τη δυνατότητα να γράψουμε selectors που θα συνδιάζουν περισσότερες από μία pseudo classes. Δείτε ένα απλό παράδειγμα με css3 για το πως μπορούμε να την χρησιμοποιήσουμε.

input.textbox:required {
    background: url("required_16.png") no-repeat scroll 185px 5px transparent;
}
input.textbox:required:valid {
    background: url("success_16.png") no-repeat scroll 185px 5px transparent;
}
input.textbox:required:invalid {
    background: url("error_16.png") no-repeat scroll 185px 5px transparent;
}

Με το css που θα γράψουμε θα δώσουμε στη φόρμα μας τα παρακάτω χαρακτηριστικά:

1. Να έχουμε πιο έντονο border όταν καποιο πεδίο είναι focused
2. Θα δώσουμε λιγότερο opacity στα not(:focus) πεδία
3. Το border θα είναι κόκκινο στα invalid και focused πεδία
4. Θα προσθέσουμε ένα μικρό εικονίδιο για background το οποίο θα βοηθάει το χρήστη να καταλάβει το status του πεδίου.

Βήμα 3: Κίνηση στα πεδία της φόρμας

Τέλος, μπορούμε να προσθέσουμε μερικά transitions για να κάνουμε τη φόρμα μας πιο διαδραστική. Όταν π.χ. ένα πεδίο γίνεται focused θα αλλάζουμε με transition το border και το box-shadow. Επίσης θα κάνουμε (πάλι με transition) ένα μικρό zoom in στα focused πεδία.

input.textbox {
    border: solid 1px #CCCCCC;
    margin: 4px;
    padding: 4px;
    width: 200px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
input.textbox:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 12px rgba(82, 168, 236, 0.6);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    transform: scale(1.05);
}

To παρακάτω demo παίζει σε Firefox, Opera (χωρίς τα transitions) και Chrome. Αν μπείτε με Internet Explorer δεν θα δείτε κ πολλά.

Πήρα λίγη βοήθεια στο css από το Bootstrap toolkit, του Twitter. Μπορείτε να το δείτε στο github eδώ.

Πηγή άρθρου: HTML5 form validation.