મૂળ HTML ફોર્મ માન્યતા કેવી રીતે કાર્ય કરે છે?

Question

Accepted Answer

HTML **બિલ્ટ-ઇન માન્યતા** વિશેષતાઓ દ્વારા પ્રદાન કરે છે, તેથી બ્રાউজર અમાન્ય સબમિશન અવરોધે છે અને સંદેશા બતાવે છે — કોઈ JavaScript જરૂરી નથી. ```html ``` માન્યતા વિશેષતાઓ: `required`, `min`/`max`, `minlength`/`maxlength`, `pattern` (regex), અને પ્રકાર સ્વયં (`email`, `url`, `number`). સબમિટ કરતી વખતે, બ્રાউજર તેમને ચેક કરે છે, જો કોઈ નિષ્ફળ જાય તો સબમિશન રોકે છે, અને પ્રથમ અમાન્ય ક્ષેત્રમાં મૂળ બબલ બતાવે છે. ## માન્ય/અમાન્ય સ્થિતિને સ્ટાઇલ કરવી ```css input:invalid { border-color: red; } input:valid { border-color: green; } input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */ ``` ## કન્સ્ટ્રેઇન્ટ વેલિડેશન API (JS નિયંત્રણ) તમે JavaScript માં માન્યતા વાંચી અને કસ્ટમાઇજ કરી શકો છો: ```js const input = document.querySelector("input"); input.validity.valueMissing; // true if required and empty input.validity.typeMismatch; // true if email/url format is wrong input.checkValidity(); // returns boolean, fires invalid event input.setCustomValidity("Passwords don't match"); // custom error message ``` `setCustomValidity` તમને નિયમો ઉમેરવાની મંજૂરી આપે છે જે વિશેષતાઓ વ્યક્ત કરી શકતી નથી (દા.ત. "પાસવર્ડ મેચ નિશ્ચિત કરો"). ## અક્ષમ કરવું / સાવધાનીઓ ```html ``` **હંમેશા સર્વર પર પણ માન્યતા આપો** — ક્લાયન્ટ માન્યતા UX માટે છે; ઉપયોગકર્તાઓ તેને બાયપાસ કરી શકે છે. ## તે શા માટે મહત્વપૂર્ણ છે મૂળ માન્યતા તમને સુલભ, સ્થાનીયકૃત ભૂલ સંદેશા અને તાત્ક્ષણિક પ્રતિસાદ મુક્ત આપે છે. કસ્ટમ નિયમો માટે ઘોષણાત્મક વિશેષતાઓને કન્સ્ટ્રેઇન્ટ વેલિડેશન API સાથે જોડો — પરંતુ તેને તમારા એકમાત્ર રક્ષણ લાઇન તરીકે ક્યારેય વિશ્વાસ કરશો નહીં; સર્વર પણ માન્યતા આપવા જોઈએ.