ידע מוקדם
קצת js
והרבה html
ישנם כמה דרכים איכריות לאימות טפסים שנישלחים ע"י תגית הform והם:
1. בצד שרת (כמו רוב במתכנתים שאני מכיר!),
2. להשתמש בJS ולהקפיץ POP-UP,
3.שימוש בDHTML
כל מיני סיבות למה להשתמש ולמה לא:
השיטה הראשונה והמוכרת:
*מהיר כל לשימוש ולא דורש למידה של שפה נוספת
*לוקח עוד תעבורה(לא ממש הרבה אבל זה עדיין נקודה חשובה)
ויש עוד אבל הם לא ממש חשובות לנושא זה.
השיטה השניה:
*לא לוכח תעבורה
מעצבן תמשתמש ואלול ליגרם לו ליברוח
השיטה השלישית שאותה אני ילמד היום:
*לא לוכח תעבורה
*לא מקפיץ שום POP-UP
*קל לשימוש
*יפה למראה
יש צורך לילמוד קצת CSS וJS - ממש קל לדעתי
והיום אני ילמד אותכם את השיטה השלישית הכי טובה!
1
קודם ניפתח דף חדש:
2
ואז נפתח קוד JS ובתוכו פונקציה חדשה שהיא תיבדוק את הטופס:
HTML קוד:
<script type="text/javascript">
function check()
{
3.1
ואז ניכתוב משתנה שיכיל את תוכן הinput שאנו רוצים ליבדוק אם יש בו תוכן (ואם לא ניכתוב פלט מתאים)
HTML קוד:
var username=document.login.username.value
if (username=="")
{
username = שם הINPUT (מה שנמצא במאפיין NAME)
login = שם הform (מה שנמצא במאפיין NAME בתגית form)
3.2
השורה הבאה כותבת לתגית span את טקסט השגיאה
HTML קוד:
usernameErr.innerHTML="username is require"
usernameErr = שם הspan
ונחזיר שלילי כדי שהטופס לא ישלח(כשבאמת יש שגיעה)
חזור על שלב 3 בישביל כל שדה
4
ניכתוב שהפונקציה תחזיר אמת(שהטופס ישלח אם אין שגיאות) וניסגור את התגיות ונתחיל את הbody:
HTML קוד:
return true
}
</script>
</head>
<body>
5
ניכתוב את תגית הטופס
HTML קוד:
<form name=login onsubmit="return check()">
המאפיין onsubmit: מה יקרה שהמשתמש ילחץ על שלח
6
ניכתוב input + תגית הspan שבמיקרה שיש שגיאה שם יוצג התוכן של השגיאה
HTML קוד:
username: <INPUT TYPE="text" name=username> <font color="red"><span id="usernameErr"></span></font><br/>
7
ונסיים תמסמך
HTML קוד:
<input type="Submit" name=Submit value="login>>">
</FORM>
</body>
</html>
וזהו!
הקוד כולו:
HTML קוד:
<html>
<head>
<script type="text/javascript">
function check()
{
var username=document.login.username.value
if (username=="")
{
usernameErr.innerHTML="username is require"
return false
}
else
{ }
return true
}
</script>
</head>
<body>
<form name=login onsubmit="return check()">
username: <INPUT name=username> <font color="red"><span id="usernameErr"></span></font><br/>
<input type="Submit" name=Submit value="login>>">
</FORM>
</body>
</html>
אתם מוזמנים ליבדוק ולהגיב!
כל הזכויות שמורות לעופרי! כותב המדריך