Theory
खाली registrations आती रहीं
FestConnect के organisers sheet खोलते हैं और ऐसी rows मिलती हैं जिनमें कोई नाम नहीं, कोई email नहीं, बस एक event है। लोगों ने खाली fields के साथ Register दबाया, और form फिर भी भेज दिया गया।
Fix है validation: form को submit होने देने से पहले, JavaScript चेक करती है कि हर required field भरी है। अगर एक खाली है, यह submission रोकती है और user को बताती है। यह lesson सबसे basic और सबसे ज़रूरी check करता है: क्या सब कुछ भरा है?
Theory
दरवाज़े पर bouncer
एक form का submit server का एक दरवाज़ा है। Validation bouncer है: किसी को अंदर जाने से पहले, वह essentials चेक करता है ('नाम? email? event?')। एक भी छूटा तो bouncer दरवाज़ा block करता है और बताता है क्या missing है। सिर्फ़ एक complete guest अंदर जाता है। बिना bouncer के, खाली और टूटे entries सीधे अंदर चली जाती हैं।
Theory
तीन steps
हर required field के लिए:
1. पढ़िए इसकी value DOM से: document.getElementById("email").value।
2. Trim कीजिए: value.trim(), ताकि सिर्फ़ spaces वाली field खाली गिने।
3. Check कीजिए: अगर यह "" है, एक message दिखाइए और submit रोकिए।
Submit `e.preventDefault()` से रोकिए (एक addEventListener handler में) या `return false` से (एक onsubmit attribute से)। यह भूल जाइए और check के बावजूद form भेज दिया जाता है।
Practical
FestConnect register() required fields चेक करता है
<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
Check करने से पहले trim() क्यों?
एक user Name box में तीन spaces type करता है और Register दबाता है। बिना trim() के, क्या आपका if (value === "") इसे पकड़ता है? trim() क्या बदलता है?
Show the answer
बिना trim() के, value " " (तीन spaces) है, जो "" के बराबर नहीं है, तो check pass हो जाता है और एक खाली दिखने वाला नाम अंदर चला जाता है। value.trim() आस-पास के spaces हटाता है, " " को "" में बदलता है, तो empty check अब इसे पकड़ता है। Whitespace-only input naive validation से खाली data sneak करने का classic तरीक़ा है; हमेशा पहले trim कीजिए।
Quiz
आपका validate() सही तरीक़े से 'email is required' alert करता है, पर form फिर भी submit होता है और page reload हो जाता है। आप क्या भूले?
- Submit रोकना: return false (onsubmit) या e.preventDefault()
- और input fields जोड़ना
- getElementById के बजाय getElementsByName इस्तेमाल करना
- Value को एक number में convert करना
Show the answer
Submit रोकना: return false (onsubmit) या e.preventDefault()
खाली field detect करना काम का सिर्फ़ आधा हिस्सा है; आपको default submission भी रोकनी है, onsubmit handler से return false या addEventListener में e.preventDefault() से (A)। इसके बिना, browser आपके alert के बावजूद submit कर देता है। और fields (B) या अलग selector (C) submission नहीं रोकते, और numbers (D) एक required-text check से unrelated हैं। Detect कीजिए, फिर block कीजिए: दोनों steps ज़रूरी हैं।
Watch out
Validation traps
1. Submit न रोकना: return false / preventDefault() के बिना एक alert form को फिर भी भेजने देता है।
2. Trim न करना: सिर्फ़ spaces वाली fields एक === "" check से निकल जाती हैं।
3. Client पर भरोसा करना: यह check एक अच्छे user experience के लिए है। एक user JavaScript disable कर सकता है, तो server को फिर validate करना ज़रूरी है save करने से पहले (Unit 3 का client/server rule)। Client validation एक courtesy है, security नहीं।
Theory
अगला: क्या यह data सही तरह का है?
'भरा हुआ' step एक है। पर name "asdf" हो सकता है और email बिना @ के "hello" हो सकता है। अगला lesson format validation जोड़ता है: चेक करना कि email email जैसा दिखे, mobile number 10 digits का हो, नाम में कोई digit न हो। वही register() function, मज़बूत checks, Unit 3 के string methods इस्तेमाल करते हुए।
Summary
Key takeaways
- Basic validation confirm करता है कि form submit होने से पहले हर required field भरी है।
- हर field के लिए: .value पढ़िए, trim() कीजिए, और अगर यह "" है एक message दिखाइए और रोकिए।
- Submit को return false (onsubmit) या e.preventDefault() (addEventListener) से रोकिए, वरना form फिर भी भेज दिया जाता है।
- हमेशा पहले trim कीजिए: वरना whitespace-only input एक empty check से पास हो जाता है।
- Client validation सिर्फ़ UX के लिए है; server को security के लिए फिर validate करना ज़रूरी है।
- Memory hook: validation दरवाज़े पर bouncer है।