Client-side Μορφή Επικύρωση με jQuery
6 Νοεμβρίου του 2008 από τον Philip Beel · 1 Σχόλιο 
Αυτό το σεμινάριο θα σας δείξει πώς να επικυρώσει μια απλή φόρμα επικοινωνίας χρησιμοποιώντας το bassistance plugin επικύρωσης jQuery. Αυτό θα σας επιτρέψει να επικυρωθεί μια μορφή πριν έχει υποβληθεί. Δείτε το demo εδώ.
Βήμα 1 - Το Έντυπο
Αυτό το ίδιο έντυπο χαρακτηρίστηκε στην Αίας Επικοινωνία Φροντιστήριο. Έτσι, αν θέλετε να επεκταθεί η αρχική της μορφή, αυτό το σεμινάριο θα πρέπει να σας δώσει τη δυνατότητα να το κάνει πολύ εύκολα.
Για να αρχίσει χρειαζόμαστε ένα νέο αρχείο, θα το ονομάσουμε contact.html, σε αυτό θα δημιουργήσουμε φόρμα μας αρέσει τόσο.
<div id="container">
<form id="contactForm" method="" action="">
<p>
<label for="name">Name </label>
<input id="name" name="name" />
</p>
<p>
<label for="email">E-Mail </label>
<input id="email" name="email" />
</p>
<p>
<label for="message">Your Message </label>
<textarea id="message" name="message" rows="4" cols="30" >
</textarea>
</p>
<p>
<input class="submit" type="submit" value="submit"/>
</p>
</form>
</div>
Τώρα έχουμε μια απλή φόρμα με 2 πεδία και ένα πλαίσιο κειμένου, το οποίο θα επικυρώσει.
Βήμα 2 - Το Plugin
Το plugin που χρησιμοποιούμε μπορείτε να κατεβάσετε από εδώ, θα χρειαστεί επίσης ένα αντίγραφο του jQuery, η οποία μπορεί να dowloaded από εδώ. Τώρα που έχουμε τα αρχεία που χρειαζόμαστε για να τα συνδέσει με contact.html αρχείο μας αρέσει τόσο.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
Παρακαλώ σημειώστε ότι Its πολύ σημαντικό να καλέσετε jQuery στην πρώτη αλλιώς το πλαίσιο δεν θα λειτουργήσει.
Βήμα 3 - Ο κώδικας
Ο ίδιος ο κώδικας είναι πολύ μικρό βάρος, να δεις
//initiate validator on load
$(function() {
// validate contact form on keyup and submit
$("#contactForm").validate({
//set the rules for the field names
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 2
},
},
//set messages to appear inline
messages: {
name: "Please enter your name",
email: "Please enter a valid email address",
message: "Please enter your message"
}
});
});
Το μόνο που κάνουμε εδώ είναι να μπει onload λειτουργία, η οποία ξεκινά την επικύρωση του εντύπου με την επικύρωση. Η επικύρωση plugin απαιτεί περνάτε από μερικά τις παραμέτρους.
κανόνες - σας επιτρέπει να καθορίσετε τα ονόματα των πεδίων που θέλετε να ασκήσει, στην περίπτωσή μας έχουμε χρησιμοποιήσει το όνομα, διεύθυνση ηλεκτρονικού ταχυδρομείου και μηνυμάτων. Μέσα από αυτό είμαστε καθορίζοντας, αν είναι το πεδίο απαιτείται ή μη, με το πέρασμα είτε αληθής ή ψευδής, θέλουμε να επικυρώσει όλα τα πεδία, ώστε όλοι οι χαρακτηρίστηκαν ως αλήθεια. Η επόμενη παράμετρος είναι Minlength, το οποίο .. το μαντέψατε, σας επιτρέπει να ορίσετε ένα ελάχιστο αριθμό χαρακτήρων που πρέπει να εγγραφούν.
μήνυμα - σας επιτρέπει να ορίσετε ένα συγκεκριμένο μήνυμα για έναν συγκεκριμένο τομέα, αν επιλέξετε να μην ορίσετε ένα messge, ένα προεπιλεγμένο παρέχεται η οποία θα πει κάτι σαν "το πεδίο αυτό ζητείται"
Βήμα 4 - Tidy It Up
Για να κάνετε τα προειδοποιητικά μηνύματα εμφανίζονται πιο αισθητή μπορούμε να προσθέσουμε μερικά στυλ, αν και αυτό δεν είναι επιτακτική ανάγκη. Μπορείτε να παρατηρήσετε ότι όταν εμφανίζεται ένα μήνυμα λάθους της, τυλιγμένη σε μια κατηγορία που ονομάζεται σφάλμα καθιστούν απλό για μας να προσθέσουμε κάποια στοιχεία όπως το στυλ
.error {
color: red;
font: 12pt verdana;
padding-left: 10px
}Και thats όλοι είναι εκεί για να το. Κατεβάστε τον κωδικό και να προσπαθήσουμε για τον εαυτό σας εδώ
Χρήσιμες, αλλά φυσικά θα πρέπει ακόμα να έχει server-side επικύρωσης επίσης.