Form Validation

Η Javascript είναι ιδανική για τον έλεγχο των στοιχείων που μας δίνει όποιος χρήστης συμπληρώνει τη φόρμα μας. Το πλεονέκτημα του ελέγχου του form input με javascript είναι πως δεν χρειάζεται να πειράξουμε το action script που κατά πάσα πιθανότητα δεν έχει φτιαχτεί από εμάς και συνεπώς είναι δυσκολότερο να τροποποιηθεί.

Έλεγχος πως ένα πεδίο συμπληρώθηκε. Ο κώδικας για μια αυτόνομη σελίδα είναι:

<HTML><HEAD><TITLE>Δοκιμές </TITLE>
<script type='text/javascript'>
function isEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return true;
}
return false;
}
</script></head>
<body><form>
Required Field: <input type='text' id='req1'/>
<input type='button'
onclick="isEmpty(document.getElementById('req1'), 'Please Enter a Value')"
value='Check Field' /> </form></BODY></HTML>

Διαβάζοντας από το τέλος βλέπουμε πως όταν κάνουμε κλικ (onclick) καλείται η function isEmpty και τις δίδονται δύο μεταβλητές. Η document.getElementById('req1'), δηλαδή το περιεχόμενο του input box που έχει name req1 και το μήνυμα «Please Enter a Value».

Βλέποντας τώρα ψηλότερα στην function isEmpty ελέγχεται το μέγεθος του κειμένου που υπήρχε στο req1 (είναι η variable elem και η εργασία απεικονίζεται ως: elem.value.length). Αν πράγματι δεν έχει μήκος τότε εμφανίζεται το alert μήνυμα (που φυλάσσεται στη μεταβλητή helperMsg).

Το elem.focus() μεταφέρει τον δρομέα μέσα στο input πεδίο ώστε ο χρήστης να μη χρειάζεται να μετακινηθεί στο πεδίο για να πληκτρολογήσει το input του.

Το return true; δηλώνει πως μετά το κλικ στο ΟΚ του χρήστη θα εκτελεστεί ο υπόλοιπος κώδικας (ο δρομέας θα πάει στο input πεδίο που δεν έχει συμπληρωθεί).

Form Validation

Τρέχουσα Ενότητα: Javascript