הצגת הודעות שגיאה למשתמש בריאקט - Validation Messages
span עם טקסט כמו Missing name, ובעזרת CSS מגדירים צבע אדום ו-position: absolute עם מרווחים.useForm גם את formState. בתוכו האובייקט errors מחזיק את השגיאות הקיימות.formState.errors.name?.type === "required". הסימן ?. מונע קריסה כש-errors.name הוא undefined.minLength להודעה Name too short ועם maxLength להודעה Name too long.required: true כותבים required: { value: true, message: "Missing price" }. כך גם min ו-max, למשל "Price can't be negative" ו-"Price can't exceed 1000".formState.errors.price?.message. אם אין שגיאה מתקבל undefined ושום דבר לא מוצג.stock (עד 10,000) ולתמונה (הודעת Missing image).register. הפתרון שנמצא היה להשאיר אותה אחרונה, והמרצה הניח שזה באג בספרייה.פרקי ההרצאה: הצגת הודעות שגיאה למשתמש בריאקט - Validation Messages
תמלול ההרצאה: הצגת הודעות שגיאה למשתמש בריאקט - Validation Messages
הטקסט המלא של הדקות הראשונות בהרצאה «הצגת הודעות שגיאה למשתמש בריאקט - Validation Messages» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו רוצים גם לראות מה בדיוק הבעיה שקשורה לוולידציה שכרגע התבצעה. מן הסתם אנחנו רוצים שיהיה לנו פה איזושהי הודעה. בואו נגיד יש לנו פה איזושהי span ובואו נגיד שאנחנו מתייחסים כרגע לשגיאה הזאת.
ווייר, אז אנחנו רושמים מיסינג ניי. נניח שזאת השגיאה שאנחנו רוצים להציג. אז קודם כל בואו נראה איך זה נראה. אפשר לראות פה את המיסינג קודם כל בכלל לא נמצא במקום שלו בוא נניח אנחנו רוצים שהוא יהיה כאן בנוסף הוא תמיד מוצג לא רוצה תמיד להציג אותו אני רוצה להציג אותו רק אם באמת יש
בעיה עם ה-Name בואו קודם כל נציג אותו כאן על ידי איזשהו CSS אולי נגדיר כאן CSS נשים אותו פה בצד ונניח שאם יש לנו בתוך Add Products Pan אז אנחנו רוצים שהוא יהיה נניח אדום אנחנו רוצים שהוא יהיה פוזישן אבסולוט ואז הוא לא נדחף בכל מיני מקומות וכבר שם אותו, איפה הוא שם לנו אותו?
סבבה, כבר שם אותו ממש איפשהו המקום שלו וטיפה נזיז אותו אולי על ידי מרג'ין. מלמעלה ולמטה אני לא רואה שאני צריך אבל אולי מימין ולשמאל ניתן לו 20 פיקסלים.
אוקיי, אז המיסינג ניים נמצא כאן, זה בסדר, אבל אנחנו לא רוצים שהוא תמיד יוצג. תראו, אני מכניס שם, הוא עדיין מוצג לי פה.
אז מה שאנחנו רוצים לעשות זה משהו שנקרא conditional rendering. אנחנו רוצים להציג את הספן הזאת רק אם באמת יש בעיה של מיסינג ניים. לצורך כך אנחנו צריכים לחזור לספרייה ולקבל ממנה עוד משתנה שמכיל מידע לגבי המצב הנוכחי של הטופס.
המשתנה הזה נקרא "form state" זה בעצם לא פה, זה אמור להיות כאן ב-use form. "form state" זה בעצם המשתנה שמכיל מידע לגבי מה קורה כרגע עם הטופס גם מבחינת ולידציה.
כאן אנחנו בעצם יכולים להשתמש איתו ואנחנו לא רוצים כל הזמן להציג את הדבר הזה, אנחנו רוצים לבצע משהו שקונדישנל רנדרינג, מה שנקרא Conditional Rendering ולהציג את זה רק אם, רק אם מה?
אני ניגש ל-form state, יש לו אובייקט בתוכו שנקרא Errors והוא מכיל כל השגיאות שכרגע קיימות. אנחנו רוצים לחפש שגיאה שקשורה למאפיין name.
אם קיימת לנו שגיאה כזאת, רק אז אנחנו רוצים לבדוק מה בדיוק הטייפ של השגיאה. עכשיו בואו רגע נבין name זה בעצם זה, בניגוד לזה וזה וזה.
טייפ זה זה בניגוד לזה וזה. כלומר, גם אנחנו רוצים לברר שה-Name כרגע יש איתו איזושהי בעיה, זאת אומרת התיבה הזאת ולא התיבות האחרות, וגם שהסוג של השגיאה שהפילה את הוולידציה, טייפ שלה זה בעצם Required ולא Minimum Length או Maximum Length.
אז אנחנו עושים את זה על ידי טייפ שווה Required. טייפ שווה אם זה המצב אז אנחנו רוצים להציג את ה-span שלנו נשים פה את ה-end הזה זאת אומרת רק אם זה מתרחש אז תציג לנו את ה-missing name תזכורת לגבי הסימן של הנקודה זה בעצם אומר אם פה יש undefined או null אז
אל תלך ותבדוק את הטייפ כי אחרת הוא נופל זאת אומרת אסור לו להיכנס לנקודה ולבדוק את הטייפ אם פה יש undefined או not. במצב כזה תן לי מכל הדבר הזה undefined.
ה-undefined לא יהיה שווה ל-required מן הסתם ואז הוא לא יציג את זה. רק אם יש בעיה עם ה-name אז תיכנס ובוא תבדוק את הטייפ.
Good, אז בואו נבדוק כרגע איך כל הסיפור הזה עובד. חזרנו לכאן ואני מכניס מידע, עובר, אין פה שום בעיה עם הודעת שגיאה הזאת. אני מוחק, עובר לכאן, אויש, אני גם רואה שאין בעיה, נכון, הוא לא עושה את זה במעבר, בואו ננסה ללחוץ על הלחצן, אה, רק אם לחצנו על הלחצן אז הוא נזכר לעשות
את זה, מעולה. אז אחרי שלחצתי, אוקיי, אחרי שלחצתי אז הוא רגיש לשינויים בטקסט, לפני זה הוא רק אחרי הלחיצה. בואו נראה עוד פעם, רפרשתי.
אז כרגע אם אני מכניס ומוחק, מכניס ומוחק הוא לא אומר לי שיש בעיה אם אני אלחץ על הלחצן אז הוא יגיד לי שיש בעיה ומכאן כן יגיד שינויים בסדר זו ההתנהגות שלו אולי יש איזושהי דרך לבצע קונפיגורציה אחרת אבל זה מספק אותנו כרגע אוקיי אבל זה מיסינג ניים מה קורה אם אני מכניס אותך מבחינתו אין בעיה רגע אני אלחץ על העד והוא זורק אותי שוב פעם לתיבה הזאת למה הוא זורק אותי שוב פעם לתיבה יש בעיה
בעיה שכרגע קרתה זאת זאת אז אנחנו רוצים לשכפל ולהגיד תשמע אם הטייפ הוא מין לאנגס אז תן לי הודעה אחרת שאומרת בוא נניח name to short זה באמת אפשר בצורה כזאת alright בואו נבדוק עכשיו הנה name to short הנה כרגע missing name הנה name to short והנה הכל בסדר alright בואו
רגע נרפרש נכניס רק אות אחת ונלחץ על add והנה אנחנו רואים name to short. נשכפל את זה גם ל-max length name to long אפשר להוסיף לו שאסור מעל 100 וכדומה אבל אני אשאר עם הודעות קצרות יותר ואם אנחנו נכניס כרגע שם שהוא יותר מדי ארוך אז אנחנו רואים name to long.
זאתי שיטה ראשונה בואו נראה עוד שיטה. מיישם את השיטה השנייה כאן. מה הבעיה עם השיטה הראשונה? הבעיה עם השיטה הראשונה