Theory
ખાલી નોંધણીઓ આવ્યા કરતી હતી
FestConnect ના આયોજકો પત્રક ખોલે છે અને એવી હરોળો મળે છે જેમાં નામ નથી, email નથી, ફક્ત event છે. લોકોએ ખાલી ખાનાં સાથે Register દબાવ્યું, અને form તોય મોકલાઈ ગયું.
ઉકેલ છે validation: form ને submit થવા દેવાય એ પહેલાં JavaScript તપાસે છે કે દરેક જરૂરી ખાનું ભરાયું છે. જો એક ખાલી હોય, તો એ submit અટકાવીને વાપરનારને કહે છે. આ પાઠ સૌથી પાયાની અને સૌથી મહત્ત્વની ચકાસણી કરે છે: બધું ભરાયું છે?
Theory
દરવાજા પરનો ચોકીદાર
Form નું submit એ server સુધીનો દરવાજો છે. Validation એ ચોકીદાર છે: કોઈ પસાર થાય એ પહેલાં એ આવશ્યક વસ્તુઓ તપાસે છે ('નામ? email? event?'). એક ચૂકે તો ચોકીદાર દરવાજો રોકે છે અને શું ખૂટે છે એ ચીંધે છે. ફક્ત પૂરો મહેમાન જ અંદર જાય છે. ચોકીદાર વગર, ખાલી અને તૂટેલી નોંધો સીધી અંદર ચાલી જાય છે.
Theory
ત્રણ પગલાં
દરેક જરૂરી ખાના માટે:
1. DOM માંથી એનું મૂલ્ય વાંચો: document.getElementById("email").value.
2. એને trim કરો: value.trim(), જેથી ફક્ત જગ્યાઓવાળું ખાનું ખાલી ગણાય.
3. તપાસો: જો એ "" હોય, તો સંદેશો દેખાડો અને submit અટકાવો.
Submit ને `e.preventDefault()` થી (addEventListener ના handler માં) કે `return false` થી (onsubmit ના attribute માંથી) અટકાવો. આ છોડી દો અને તમારી ચકાસણી છતાં form મોકલાઈ જાય છે.
Practical
FestConnect નું register() જરૂરી ખાનાં તપાસે છે
<form id="reg" onsubmit="return validate()">
<input id="name" placeholder="Name">
<input id="email" placeholder="Email">
<input id="event" placeholder="Event">
<button type="submit">Register</button>
</form>
<script>
function validate() {
let ids = ["name", "email", "event"];
for (let i = 0; i < ids.length; i++) {
let value = document.getElementById(ids[i]).value.trim();
if (value === "") {
alert(ids[i] + " is required");
return false; // STOP the submit
}
}
return true; // all filled: allow submit
}
</script>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
તપાસતાં પહેલાં trim() કેમ?
એક વાપરનાર Name ના ખાનામાં ત્રણ જગ્યાઓ લખીને Register દબાવે છે. trim() વગર, તમારું if (value === "") એને પકડે છે? trim() શું બદલે છે?
Show the answer
trim() વગર, મૂલ્ય છે " " (ત્રણ જગ્યાઓ), જે "" બરાબર નથી, એટલે ચકાસણી પસાર થઈ જાય છે અને ખાલી દેખાતું નામ અંદર જતું રહે છે. value.trim() આસપાસની જગ્યાઓ કાઢી નાખે છે, અને " " ને "" બનાવે છે, એટલે ખાલીની ચકાસણી હવે એને પકડે છે. ફક્ત જગ્યાઓવાળું input એ ભોળા validation ને છેતરીને કોરો data ઘુસાડવાની જાણીતી રીત છે; હંમેશા પહેલાં trim કરો.
Quiz
તમારું validate() બરાબર 'email is required' નું alert આપે છે, પણ form તોય submit થઈને પાનું ફરી load થાય છે. તમે શું ભૂલી ગયા?
- Submit અટકાવવાનું: return false (onsubmit) કે e.preventDefault()
- વધુ input નાં ખાનાં ઉમેરવાનું
- getElementById ને બદલે getElementsByName વાપરવાનું
- મૂલ્યને number માં ફેરવવાનું
Show the answer
Submit અટકાવવાનું: return false (onsubmit) કે e.preventDefault()
ખાલી ખાનું પકડવું એ કામનો ફક્ત અડધો ભાગ છે; તમારે મૂળભૂત submit પણ અટકાવવું પડે, onsubmit ના handler માંથી return false થી કે addEventListener માં e.preventDefault() થી (A). એના વગર, તમારા alert છતાં browser submit કરી જ દે છે. વધુ ખાનાં (B) કે જુદો selector (C) submit અટકાવતાં નથી, અને આંકડા (D) જરૂરી લખાણની ચકાસણી સાથે અસંબંધિત છે. પકડો, પછી રોકો: બંને પગલાં જોઈએ.
Watch out
Validation ના ફાંદા
1. Submit ન અટકાવવું: return false / preventDefault() વગરનું alert form ને તોય મોકલવા દે છે.
2. trim ન કરવું: ફક્ત જગ્યાઓવાળાં ખાનાં === "" ની ચકાસણીમાંથી સરકી જાય છે.
3. Client પર ભરોસો કરવો: આ ચકાસણી સારા અનુભવ માટે છે. વાપરનાર JavaScript બંધ કરી શકે છે, એટલે સંઘરતાં પહેલાં server એ ફરી validate કરવું જ પડે (Unit 3 નો client/server નો નિયમ). Client નું validation એ સૌજન્ય છે, સલામતી નહીં.
Theory
આગળ: શું એ **સાચા** પ્રકારનો data છે?
'ભરાયેલું' એ પહેલું પગલું છે. પણ name એ "asdf" હોઈ શકે અને email એ @ વગરનું "hello". હવે પછીનો પાઠ સ્વરૂપ નું validation ઉમેરે છે: email એ email જેવું લાગે છે કે નહીં, mobile નંબર 10 આંકડાનો છે કે નહીં, નામમાં આંકડા નથી ને એ તપાસવું. એ જ register() નું function, વધુ મજબૂત ચકાસણીઓ, અને એ પણ Unit 3 ની string ની પદ્ધતિઓ વાપરીને.
Summary
Key takeaways
- પાયાનું validation ખાતરી કરે છે કે form submit થાય એ પહેલાં દરેક જરૂરી ખાનું ભરાયું છે.
- દરેક ખાના માટે: .value વાંચો, એને trim() કરો, અને જો એ "" હોય તો સંદેશો દેખાડીને અટકો.
- Submit ને return false (onsubmit) કે e.preventDefault() (addEventListener) થી અટકાવો, નહીં તો form તોય મોકલાય છે.
- હંમેશા પહેલાં trim કરો: નહીં તો ફક્ત જગ્યાઓવાળું input ખાલીની ચકાસણી પસાર કરી જાય છે.
- Client નું validation ફક્ત UX માટે છે; સલામતી માટે server એ ફરી validate કરવું જ પડે.
- Memory hook: validation એ દરવાજા પરનો ચોકીદાર છે.