ולידציה נעה לשליחת טפסים

 

כבר זה הרבה זמן שבשליחת טפסים (כמו ביצירת קשר, מתן פידבק…) אנחנו משתמשים בולידציה צד לקוח, שזה אומר, שלפני שאנחנו שולחים טופס מלא בנתונים אנחנו בודקים כי אכן הנתונים תואמים לדרישות השדות (איימיל יהיה מלא בכתובת מייל תיקנית, טלפון יהיה מורכב ממספרים בלבד). שדה שלא בר-תוקף (הביטוי העברי המקביל לולידציה) יסומן לרוב בצבע אדום ותופיע הודעה על מסך המשתמש שהוא אכן צריך למלא מחדש את השדה בצורה נכונה. מה שאני אסביר לכם במדריך זה הוא על אפקט פשוט ב-jQuery שיוצר אפקט תזוזה בשדות שלא מולאו נכון.

את הרעיון למדריך הזה לקחתי מהאתר המומלץ (janko at warp speed) והדוגמא שאני אתן לכם פה היא למעשה מאוד פשוטה. נעשית בדיקה פשוטה ב-jQuery, אם אחד מהשדות הקיימים ריק ואם כן נוצרת אנימציה על אותה שדה והוא נצבע באדום. זוהי הבדיקה:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
    $("#signup").click(function() {
      var emptyfields = $("input[value=]");
      if (emptyfields.size() > 0) {
         emptyfields.each(function() {
            //האנימציה מתרחשת כאן
         });
      }
   });
});

מה שבעצם קורה כאן, כאשר לוחצים על כפתור השליחה הסקריפט עובר על כל השדות (input) הריקים, אם יש לפחות שדה אחד, הוא מבצע עליו אנימציה.

האנימציה

בואו נסתכל על הקוד לאחר הוספת האנימציה:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
  $("#signup").click(function() {
    var emptyfields = $("input[value=]");
    if (emptyfields.size() > 0) {
      emptyfields.each(function() {
         $(this).stop()
        .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
        .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
        .animate({ left: "0px" }, 100)
        .addClass("required");
      });
    }
  });
});

האנימציה שהסקריפט מבצע הוא למעשה הזזה שמאלה וימינה של השדה הריק והוספת class שצובע את השדה בצבע אדום.

שימו לב! על-מנת שהסקריפט יעבוד חייבים להגדיר position:relative לכל השדות הנעים (input)

אנחנו ממש קרובים לסיום, הדבר היחידי שחסר לנו הוא הסרת הצבע האדום כאשר השדה הופך להיות בר תוקף.

כל שאנחנו צריכים להוסיף לסקריפט את השורות הבאות:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
  $("#signup").click(function() {
     resetFields();
    var emptyfields = $("input[value=]");
    if (emptyfields.size() > 0) {
      emptyfields.each(function() {
        $(this).stop()
        .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
        .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
        .animate({ left: "0px" }, 100)
        .addClass("required");
      });
    }
  });
});
 function resetFields() {
  $("input[type=text], input[type=password]").removeClass("required");
}

מה שעשינו הוא הוספנו בתחילת הסקריפט קריאה לפונקציה resetFields וכמובן הוספנו את הפונקציה עצמה אשר מוחקת מכל שדות הinput את מאפיין ה-class.

כעת סיימנו. כמובן שהטופס הזה לא שולח שוב דבר, מה שהראתי לכם פה זה איך לבצע אנימציה חמודה על-מנת להראות לגולש בביוור אילו שדות הוא לא מילא כראוי (לא בדקנו שאימייל הוא אימייל תקין או ששדה וידוא סיסמא באמת מכיל את הסיסמא), אתם מוזמנים לשלב את הקוד שהוצג פה יחד עם המדריך המעולה של אינטרנט ישראל ליצירת ולדציה לטפסים ובכך ליצור טופס עם ולדציה מלאה ואנימציה מבהירה.

בהצלחה!

שתפו את הפוסט הזה:
http://www.htm.co.il/wp-content/plugins/sociofluid/images/digg_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/google_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/myspace_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/facebook_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/twitter_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/bookmark_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/email_48.png http://www.htm.co.il/wp-content/plugins/sociofluid/images/print_48.png

עוד באותו נושא:

 

דיון פתוח

מה אתם חושבים? רשמו את תגובתכם.

כתיבת תגובה

אבטחה: שאלת אבטחה

ניסיון