תפריט

שינוי שגיאות וולידציה ברירת מחדל של דפדפן

מדריך לשינוי שגיאות וולידציה ברירת מחדל של דפדפן

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

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

				
					<form>
  <label>דוא"ל<input type="email" required></label>
  <label>שם<input type="text" required></label>
<button>שליחה</button>
</form>

באמצעות הקוד הבא נגדיר את ההדעה שנרצה שיוצג לגולש (בדוגמה הזאת נציג לגולש שהזין אימייל בפורמט לא תקין את ההודעה הבאה: "יש להזין פורמט אימייל חוקי"

				
					<script>

let emailMsg = $('input[type="email"]');
emailMsg.on('invalid' , function(e) {
e.target.setCustomValidity("");
	if (!e.target.validity.valid) {
e.target.setCustomValidity("יש להזין פורמט אימייל חוקי");
	}
}
        )

</script>

ניתן להוסיף את אותו קוד לשדות מסוגים נוספים יש לשנות בסלקטור את סוג השדה, את שם המשתנה ואת הודעה שתוצג לגולש.
בדוגמה הבאה נשנה את ההודעה המוצגת לשדה מסוג text שהוגדר כשדה חובה והגולש לא הזין בו פרטים שיקבל את ההודעה הבאה: "לא ניתן להשאיר שדה זה ריק"

				
					<script>


let textMsg = $('input[type="text"]');
textMsg.on('invalid' , function(e) {
e.target.setCustomValidity("");
	if (!e.target.validity.valid) {
e.target.setCustomValidity("לא ניתן להשאיר שדה זה ריק");
	}
}
        )

</script>

ליצירת קשר השאירו פרטים כאן