पाठ 30, कुल 30 में

JavaScript Form Validation — दरवाज़े पर जाँच

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

JavaScript और DOM — पेज को पेड़ समझिए अंतिम टेस्ट दें

Form आपकी वेबसाइट में जाने वाला दरवाज़ा है। Visitor जो कुछ भी लिखता है — नाम, mobile number, email — वह सीधे उसी दरवाज़े से अंदर चला जाता है। अगर आप पहले उसे जाँचते नहीं हैं, तो गलत डेटा अंदर आ जाता है: खाली नाम, नौ अंकों वाला mobile number, बिना @ वाला email। Form validation दरवाज़े पर खड़ा guard है: वह हर value को अंदर जाने से पहले जाँचता है, और गलत चीज़ के बगल में साफ़ error दिखाता है।

Diagram — देखें, यह सब कैसे जुड़ता है

Admission desk की तरह सोचिए। Clerk आधा भरा form office नहीं भेजती — वह उसे desk पर ही जाँचती है, खाली लाइन की ओर इशारा करती है, और छात्र से उसे भरने को कहती है। JavaScript पेज पर वही काम करता है, तुरंत, server को कुछ भेजने से पहले। दरवाज़े पर जाँचना बाद में गलती ढूँढने से तेज़ और अच्छा है।

Values पढ़ना — .value

let name = document.getElementById("name").value;
let mobile = document.getElementById("mobile").value;
let email = document.getElementById("email").value;

हर input की .value होती है — हमेशा string, numbers के लिए भी (type conversion वाला पाठ याद कीजिए)। Checkbox के लिए .checked इस्तेमाल कीजिए: यह true या false होता है। Dropdown (<select>) के लिए .value उस option की value देता है जिसे user ने चुना है।

Values जाँचना — आम नियम

खाली: if (name.trim() === "") — trim() दोनों सिरों से spaces हटा देता है, इसलिए सिर्फ spaces वाला box भी खाली गिना जाता है।
लंबाई: if (mobile.length !== 10) — भारतीय mobile number में ठीक 10 अंक होते हैं।
सिर्फ numbers: if (isNaN(Number(mobile))) — mobile number में अक्षर नहीं हो सकते।
Email: if (!email.includes("@")) — एक आसान जाँच जो सबसे आम गलती पकड़ती है। पूरी email जाँच में pattern इस्तेमाल होता है, पर @ और dot पहली version के लिए काफी हैं।

Note: JavaScript validation user की सुविधा के लिए है — यह तुरंत feedback देता है। यह सुरक्षा नहीं है। कोई भी JavaScript बंद कर सकता है, इसलिए server को वही नियम फिर से जाँचने चाहिए। Browser पर अकेले भरोसा करके महत्वपूर्ण डेटा कभी मत छोड़िए।

Errors दिखाना और submit रोकना

function validate() {
  let error = document.getElementById("error");
  if (name.trim() === "") {
    error.textContent = "Please type your name.";
    return false;
  }
  error.textContent = "";
  return true;
}

Error को form के बगल में लाल paragraph में दिखाइए, और समस्या ठीक होते ही उसे साफ़ कर दीजिए। जब form में असली submit button होता है, तो form का onsubmit पेज को भेजने से रोकने के लिए return false करना चाहिए — या आप event.preventDefault() बुला सकते हैं। हमारे उदाहरण में button type="button" है, इसलिए वह खुद कभी submit नहीं करता: JavaScript तय करता है कि क्या होगा, और जब सब कुछ सही होता है, तो हरी success message दिखाता है।

Tip: ऐसे याद रखिए: दरवाज़े पर जाँचिए, मेहमान अंदर आने के बाद नहीं। Button click पर validate कीजिए, पहली error जो मिले उसे दिखाइए, और errors को ठीक होते ही साफ़ कर दीजिए — एक साफ़ message पाँच उलझाने वाले messages से बेहतर है।

आम गलतियाँ

trim() भूल जाना — सिर्फ spaces वाला नाम खाली जाँच पास कर जाता है। पहले हमेशा trim कीजिए।
Number पर length जाँचना — mobile.length काम करता है, क्योंकि value string है; अगर आपने उसे पहले Number() से बदल दिया, तो .length undefined है।
सिर्फ submit पर validate करना — जब user field छोड़ता है, तब भी जाँचिए, ताकि error उसी समय दिखे, जब वह उसे देख रहा है।
एक साथ पाँच errors दिखाना — पहली को ठीक कीजिए, फिर अगली दिखाइए। एक बार में एक message अच्छा है।
सिर्फ browser validation पर भरोसा करना — server को सब कुछ फिर से जाँचना चाहिए, क्योंकि JavaScript बंद किया जा सकता है।

याद रखें

Inputs को .value (strings) से पढ़िए और checkboxes को .checked से।
आम जाँचें: खाली (trim() === ""), लंबाई, सिर्फ numbers, email में @।
Errors को form के बगल में लाल रंग में दिखाइए; ठीक होते ही साफ़ कर दीजिए।
खराब submit को return false या event.preventDefault() से रोकिए।
दरवाज़े पर जाँचिए, मेहमान अंदर आने के बाद नहीं।

उदाहरण समझिए

let name = document.getElementById("name").value.trim(); — नाम पढ़ता है और spaces trim करता है, ताकि " " खाली गिना जाए।
if (name === "") { showError("Please type your name."); return; } — पहली जाँच function को उसी पल रोक देती है, इसलिए एक बार में सिर्फ एक error दिखती है।
if (mobile.length !== 10 || isNaN(Number(mobile))) — mobile ठीक 10 characters का और सिर्फ digits का होना चाहिए।
if (!email.includes("@")) — email में @ होना चाहिए। आसान, पर यह सबसे आम गलती पकड़ता है।
document.getElementById("out").style.color = "green"; — जब हर जाँच पास हो जाती है, तो message हरा हो जाता है: form स्वीकार हो गया।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Admission Form — Validation</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; text-align: center; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 360px; margin: 20px auto; }
button { background-color: #b45309; color: white; border: none; padding: 10px 18px; font-size: 16px; }
input { width: 200px; padding: 6px; margin: 4px 0; }
#out { font-weight: bold; }
</style>
</head>
<body>

<h1>Admission Form</h1>
<div class="card">
<p>Name: <input id="name" type="text" value="Priya"></p>
<p>Mobile: <input id="mobile" type="text" value="9876543210"></p>
<p>Email: <input id="email" type="text" value="priya@example.com"></p>
<p><button onclick="submitForm()">Submit admission</button></p>
<p id="out">Fill the form and click Submit. Try a wrong value — the error appears in red.</p>
</div>

<script>
function submitForm() {
  let out = document.getElementById("out");
  let name = document.getElementById("name").value.trim();
  let mobile = document.getElementById("mobile").value.trim();
  let email = document.getElementById("email").value.trim();
  out.style.color = "red";
  if (name === "") {
    out.textContent = "Please type your name.";
    return;
  }
  if (mobile.length !== 10 || isNaN(Number(mobile))) {
    out.textContent = "Mobile must be 10 digits, numbers only.";
    return;
  }
  if (!email.includes("@")) {
    out.textContent = "Email must contain @.";
    return;
  }
  out.style.color = "green";
  out.textContent = "Thank you, " + name + "! Your admission form is accepted.";
}
</script>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

<!DOCTYPE html>
<html>
<head>
<title>Admission Form — Validation</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; text-align: center; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 360px; margin: 20px auto; }
button { background-color: #b45309; color: white; border: none; padding: 10px 18px; font-size: 16px; }
input { width: 200px; padding: 6px; margin: 4px 0; }
#out { font-weight: bold; }
</style>
</head>
<body>

<h1>Admission Form</h1>
<div class="card">
<p>Name: <input id="name" type="text" value="Priya"></p>
<p>Mobile: <input id="mobile" type="text" value="9876543210"></p>
<p>Email: <input id="email" type="text" value="priya@example.com"></p>
<p><button onclick="submitForm()">Submit admission</button></p>
<p id="out">Fill the form and click Submit. Try a wrong value — the error appears in red.</p>
</div>

</body>
</html>

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।