וולידציה לטפסי אלמנטור פרו עם jQuery Validate

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

הנושאים הנלמדים בסרטון:
✅ הדגמה והסבר על 2 שיטות הוולידציה שפועלות כברירת מחדל בטפסי אלמנטור פרו
✅ הטמעת הספריה של jQuery Validate באמצעות קוד PHP.
✅ הטמעת קוד jQuery בעמוד והגדרות CSS בסיסיות.
✅ מעבר על הקוד וביצוע התאמות לצרכים שלנו.
✅ דוגמאות לדוקומנטציה של ספריית jQuery Validate ועבודה עם צ'אט GPT לשיפור והרחבת הקוד
✅ בונוס קטן: תיקון יישור כפתורי רדיו ותיבות סימון בטפסי אלמנטור פרו

אם תרצו ללמוד עוד, אני מזמין אתכם להתרשם ולהרשם לקורס בניית אתרים בוורדפרס באמצעות אלמנטור, בכתובת: https://wp.f2f.co.il/

קישור (אפילייט) לרכישת אלמנטור פרו: https://be.elementor.com/visit/?bta=8704&nci=5383

הקוד בו השתמשתי בסרטון:

קוד PHP להטמעת ספריית jQuery Validate (ממליץ על שימוש בטופס WPCode)

function script_that_requires_jquery() {
    wp_register_script( 'jquery-validate', 'https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.js', array( 'jquery' ), '1.0.0', true );
    wp_enqueue_script( 'jquery-validate' );
}
add_action( 'wp_enqueue_scripts', 'script_that_requires_jquery' );

קוד jQuery להטמעה באמצעות אלמנט HTML

<script>
jQuery(document).ready(function($){

/*** שינוי שמות השדות מברירת המחדל של אלמנטור לשמות שלנו ***/
$('#form-field-name').attr('name', 'name');  //לשינוי שם השדה
$('#form-field-email').attr('name', 'email'); //לשינוי שם השדה
$('#form-field-phone').attr('name', 'phone').removeAttr('pattern'); //לשינוי שם השדה והסרת הפטרן שזורק שגיאה

/*** הוספת תמיכה בולידציה לשדות מסוג טלפון ***/
$.validator.addMethod("tel", function(value, element) {
  return this.optional(element) || /^[0-9\-\+\s\(\)]{7,20}$/.test(value);
}, "יש להזין מספר טלפון תקין"); 

/*** הפעלת הולידציה על המזהה היחודי של הטופס שלנו. שימו לב להתאים את המזהה היחודי לזה שבטופס ***/
$("#contact_page_form").validate({
errorElement : 'div',
    errorLabelContainer: '.errorTxt',   

/*** הוספת ולידציות וכללים לכל שדה ***/

rules: {
    name: {
    required: true,
    minlength: 2
  },
    phone: {
      required: true,
      tel: true
    },
    email: {
      required: true,
      email: true
    }
    
  },
/*** הוספת הודעות מותאמות ***/
  messages: {
    name: {
    required: "נא להזין שם",
    minlength: "השם חייב להכיל לפחות 2 אותיות"
  },
    email: {
      required: "יש להזין כתובת אימייל",
      email: "כתובת האימייל שלך חייבת להיות בפורט של: name@domain.com"
    },
    phone: {
        required: "נא להזין מספר טלפון",
        tel: "יש להזין מספר טלפון תקין"
      }
  },
  onkeyup: function(element) {
      $(element).valid();
    }
});
});
</script>

קוד CSS לשיפור נראות הודעות השגיאה:

input:focus {
    border-color: #4994CC !important;
    background-color: #EDF6FF !important
}
span.elementor-message-danger {
    display: none;
}
.elementor-field-group {
    position: relative;
    display: flex;
    align-content: flex-start;
}
.error {
    
    color: red !important;
    font-weight: 500 !important;
    font-size: 80%;
   
}

בונוס – קוד CSS ליישור כפתורי רדיו ותיבות סימון בטפסי אלמנטור פרו

/**** vertical align checkboxes and radio ****/
.elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option input, .elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option label, .elementor-field-type-checkbox .elementor-field-subgroup .elementor-field-option input, .elementor-field-type-checkbox .elementor-field-subgroup .elementor-field-option label, .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option input, .elementor-field-type-radio .elementor-field-subgroup .elementor-field-option label {
vertical-align: middle;
}