בצד הלקוח טופס אימות עם jQuery
6 נובמבר 2008 על ידי פיליפ בל · 1 תגובות
הדרכה זו יראה לכם כיצד לאמת את טופס יצירת קשר פשוט באמצעות bassistance jQuery plugin אימות. זה יאפשר לך לאמת צורה לפני שהיא הוגשה. ראו הדגמה כאן.
שלב 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
תוסף אנו משתמשים ניתן להוריד כאן , אנו זקוקים גם העתק של jQuery, אשר ניתן dowloaded מ כאן . עכשיו יש לנו את הקבצים שאנו צריכים לצרף אותם לקובץ contact.html שלנו כמו אז.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
שים לב חשוב מאוד שאתה קורא 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 לאמת מחייב אותך לעבור דרך paramenters מעטים.
הכללים - מאפשר לך לציין את שמות השדות ברצונך לפעול על, במקרה שלנו השתמשנו, שם דוא"ל הודעה. בתוך זה אנו לציין אם השדה נדרשת או לא, על ידי העברת או אמת או שקר, אנחנו רוצים לאמת את כל השדות, כך שכל מסומנים נכון. הפרמטר הבא הוא minlength, אשר .. ניחשתם נכון, מאפשר לך להגדיר את מספר התווים המינימלי להיות נכנסו.
הודעה - מאפשר לך להגדיר הודעה ספציפית בתחום מסוים, אם תבחר שלא להגדיר messge, אחד ברירת המחדל היא סיפקה אשר יאמר משהו כמו "שדה זה נדרש"
שלב 4 - לסדר את המצב
כדי להפוך את הודעות האזהרה יופיעו בולט יותר אנו יכולים להוסיף קצת סגנון, אם כי זה אינו הכרחי. ניתן להבחין כי כאשר מופיעה הודעת שגיאה עטוף שלה בכיתה בשם שגיאה עושה את זה פשוט לנו להוסיף קצת מידע בסגנון כמו כן
.error {
color: red;
font: 12pt verdana;
padding-left: 10px
}ו thats כל מה שיש בו. הורד את הקוד לנסות בעצמכם כאן
שימושי, אבל כמובן אתה עדיין צריך להיות בצד השרת, כמו גם אימות.