ולידציה בריאקט - React Validation
register ב-react-hook-form.error.response.data.register("name", { required: true, minLength: 2, maxLength: 100 }).price ו-stock משתמשים ב-min ו-max ולא ב-minLength. ל-price המינימום 0 והמקסימום 1000, ול-stock המינימום 0 והמקסימום 10000.required: true.פרקי ההרצאה: ולידציה בריאקט - React Validation
תמלול ההרצאה: ולידציה בריאקט - React Validation
הטקסט המלא של הדקות הראשונות בהרצאה «ולידציה בריאקט - React Validation» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו רוצים להוסיף זה את נושא הוולידציה. ולידציה זה בעצם אימות קלט המשתמש. אם אנחנו עכשיו בתור משתמשים מכניסים מידע שגוי, בוא נניח שיש לנו שם שמכיל אות אחת בלבד, בוא נניח שיש לנו מחיר שלילי, בוא נניח שיש לנו סטוק יותר מדי גדול שהוא לא בכלל הגיוני ואין לנו תמונה בכלל, ואנחנו מנסים עכשיו לשלוח את זה לשרת.
שרת עכשיו לא מסכים לקבל את זה. הוא אומר לנו, תשמעו, יש לנו פה איזושהי שגיאת ולידציה, שגיאת ולידציה זה תמיד שגיאה שנקראת 400, קוד ריקווסט 400 זה נקרא bad request, הוא זורק לי bad request, הוא כמובן גם מתאר מה הבעיה, פשוט לא הצגנו את זה.
אם אני כרגע אחזור ואולי אני אציג על הקונסול, נראה מה השרטון הזה מחזיר, לוג, אירור, אני חושב שהוא מציג אירור דאטה, טוב, בואו נראה רגע מה בעיה.
בעצם כי זה access, access מחזירה את זה. ננסה שוב פעם, והוא נותן לנו error שלא כל כך ניתן להבין מה זה. בואו נראה, אולי יש לנו פה data ב-error הזה.
ננסה שוב פעם, no, אולי error.response, הוא לא כל כך מגלה לי מה יש בתוכו, אה, כן, רספונס ובתוכו יש דאטה, אוקיי, נקודת דאטה, בוא נראה שוב פעם מה הוא אומר לנו, יופי, זה מה שהשרת מחזיר לנו כתשובה שמוחזרת משגיאת ולידציה, הוא מחזיר לנו איזשהו מערך כזה ואומר
לנו יש לכם פה name must be minimum 2 chars, the price must be minimum 0, אתם רואים שהשרת מחזיר את המידע הזה. שימו לב שספציפית השרת לא מחייב אותנו לשלוח תמונה עבור מוצר, אבל זו כבר החלטה של השרת עצמו.
עכשיו, השרת בעצם עושה את העבודה כמו שצריך, הוא לא מסכים לקבל מידע לא חוקי או מידע שגוי. אז אתם יכולים להגיד, טוב, אז הכל בסדר, יש ולידציה בצד של השרת.
אבל זה לא מספיק טוב, אנחנו לא רוצים שהשרת יחזיר לנו את הדבר הזה. קודם כל כי מי אמר שאני רוצה להציג את המידע באנגלית? השרת תמיד יביא לי מידע באנגלית, כן?
מי אמר שאני רוצה להציג אותו בפורמט הזה? אולי אני רוצה להציג אותו באיזשהו פורמט אחר? ולמה אני צריך בכלל לגלוש לשרת ולבזבז זמן של גלישה ולבזבז עומס עבודה של השרת כאשר אני יכול לבדוק את הוולידציה בצד של הפרונט?
אז מה החוקים לבדיקת הוולידציה מבחינת Back וFront? ולידציה תמיד צריך לבדוק גם בפרונט וגם בבק. יש מקרה אחד שאי אפשר לבדוק ולידציה בפרונט, כלומר סוג מסוים של מקרים שאי אפשר לבדוק ולידציה בפרונט, וכאשר הוולידציה צריכה מידע מהדאטאבייס ואז אין לנו את הדאטאבייס בפרונט אז זה משהו שרק הבק אנד יכול לבדוק.
לדוגמה אם אני עושה הרשמה ואני מכניס אימייל לצורך הרשמה ואני רוצה לבדוק שהאימייל הזה לא קיים. אני לא יכול לבדוק את זה בפרונט-אנד אם לא קיים אימייל כי אין לי את כל האימיילים בפרונט, אימיילים יש לי בדאטאבייס.
זה מקרה שרק השרת יכול לבדוק את הנקודה הזאת ולא הפרונט. מקרים כאלה שדורשים מידע מהדאטאבייס רק הבק-אנד יכול לבדוק, אבל כל מקרה אחר שאני לא באמת צריך את הדאטאבייס אני צריך לעשות את הוולידציה גם בפרונט וגם בבק.
רגע, למה לשכפל את הוולידציה? למה לא מספיק רק בפרונט? ה-Backend לא יודע מי זה הפרונט, הוא לא יודע מי בונה את הפרונט-אנד והאם באמת הייתה