Πως να υπερβείτε τα μηνύματα των απαιτούμενων πεδίων στην html5 από Χρήστος Στ.
10 Οκτωβρίου 2011 , σε Web development με 0 σχόλια και ετικέτες html5 javascript validation
Στην HTML5 μιά από τις ιδιότητες που είναι αρκετά χρήσιμη στα πεδία τύπου input είναι η "required". Έτσι εάν έχετε μια φόρμα με διάφορα πεδία που απαιτούνται, η επικύρωση από την μεριά του εξυπηρετητή θα πρέπει να λειτουργεί ούτως η άλλως, για κάθε ενδεχόμενο, αλλά η επικύρωση στην πλευρά του πελάτη δεν είναι απαραίτητο να γίνεται με javascript πιά, αλλά με HTML5. Απλά προσθέστε την ιδιότητα required στα πεδία που χρειάζεται (λάβετε όμως υπόψη σας και τους browsers που δεν υποστηρίζουν ακόμη HTML5, οπότε εκεί javascript μόνο για client side validation).
Tο μήνυμα βέβαια της ιδιότητας "required", είναι ένα μήνυμα προεπιλεγμένο από τον browser και η εμφάνιση μπορεί να μην ταιριάζει με αυτή της ιστοσελίδας. Π.χ. δεν είναι στα ελληνικά. Οπότε τι κάνεις; Javascript to the rescue (έχει ελεγχθεί στις τελευταίες εκδόσεις Firefox και Chrome). Μια μικρή javascript function παρακάτω για να τη χρησιμοποιήσετε όπως εσείς θέλετε ...
function customValidityMessages() {
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
// είτε βάλτε ένα δικό σας μήνυμα λάθους
e.target.setCustomValidity("Εε!! συμπλήρωσέ το");
// η αλλάξτε το μήνυμα και την εμφάνιση προσθέτωντας μετά τη γραμμή e.preventDefault()
// τον κώδικά σας που αλλάζει την εμφάνιση του μηνύματος. Μπορείτε να χρησιμοποιήσετε
// το qtip2 http://craigsworks.com/projects/qtip2/
e.preventDefault();
// ο κώδικάς σας εδώ...
}
};
}
}
