בצד הלקוח אימות טופס עם jQuery
6 נובמבר 2008 על ידי פיליפ Beel · 1 תגובה 
מדריך זה יראה לכם כיצד כדי לאמת את טופס יצירת קשר פשוט באמצעות תוסף bassistance אימות jQuery. הדבר יאפשר לך לאמת את טופס לפני שהיא הוגשה. לראות את הדמו כאן.
שלב 1 - טופס
צורה זו זהה היה מובלט על אייאקס טופס יצירת קשר Tutorial. אז אם את רוצה להאריך את הטופס המקורי, הדרכה זו צריכה לאפשר לך לעשות זאת די בקלות.
כדי להתחיל אנו צריכים קובץ חדש, אנו קוראים לזה 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 - The plugin
The 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, אשר יוזם את האימות של הטופס באמצעות לאמת. The plugin לאמת מחייב אותך לעבור כמה paramenters.
הכללים - זה מאפשר לך לציין את שמות השדות שברצונך לפעול על, במקרה שלנו השתמשנו שם, הודעת דוא"ל. בתוך זה אנחנו ציון אם השדה נדרש או לא, על ידי העברת או אמת או שקר, אנחנו רוצים לאמת את כל השדות, מסומנים כל כך אמיתי. הפרמטר הבא הוא minlength, אשר .. ניחשתם נכון, מאפשר לך להגדיר מספר מינימלי של תווים להיות נכנס.
הודעה אחת - מאפשר לך להגדיר הודעה ספציפיים עבור שדה מסוים, אם תבחר שלא להגדיר messge, אחד מחדל מתפרסם אשר יאמרו משהו כמו "שדה זה נדרש"
שלב 4 - Tidy It Up
כדי להפוך את הודעות האזהרה מופיעים יותר בולט אנו יכולים להוסיף כמה סטיילינג, אם כי זה אינו הכרחי. אתה עלול לשים לב כאשר מופיעה הודעת שגיאה עטוף שלה בכיתה בשם שגיאה זה פשוט עושה לנו להוסיף כמה פרטים כמו סגנון כל כך
.error {
color: red;
font: 12pt verdana;
padding-left: 10px
}Thats ואת כל מה שיש בו. הורד את הקוד ונסה בעצמך כאן
שימושי, אבל כמובן שאתה עדיין צריך לעבור אימות בצד השרת גם.