अगर आपने पिछले tutorial में JavaScript Form Validation, Required Fields और Submit Event के बारे में पढ़ा है, तो अब अगला important step है अलग|अलग प्रकार के input को validate करना।
किसी भी website के form में सिर्फ यह check करना काफी नहीं होता कि field खाली है या नहीं। कई बार user information तो enter कर देता है, लेकिन वह सही format में नहीं होती।
उदाहरण के लिए:
- Name की जगह numbers डाल दिए जाएं।
- Email में @ या domain missing हो।
- Password बहुत छोटा हो।
- Mobile Number में letters डाल दिए जाएं।
ऐसी situations में JavaScript Validation काफी useful होती है।
इस tutorial में हम तीन common validations को आसान भाषा में समझेंगे:
- Name और Email Validation
- Password Validation
- Mobile Number Validation
साथ ही छोटे practical examples भी देखेंगे ताकि concept को समझना आसान हो।
Validation केवल Required Field से अलग कैसे है?
पिछले tutorial में हमने Required Field के बारे में समझा था।
Required field का basic काम यह check करना है कि user ने field खाली तो नहीं छोड़ी।
लेकिन मान लीजिए user ने Email field में यह लिख दिया:
hello
Field खाली नहीं है, लेकिन यह जरूरी नहीं कि यह एक valid email address हो।
इसी तरह Mobile Number में:
abc123
कुछ information मौजूद है, लेकिन यह valid mobile number नहीं है।
इसलिए हमें दो अलग चीजें समझनी चाहिए:
Required Validation | Field खाली है या नहीं।
Format Validation | दी गई information सही format में है या नहीं।
1. Name Validation क्या है?
Registration, Contact और Application Forms में Name एक common field है।
उदाहरण:
<label>Name:</label>
<input type=”text” id=”name”>
अब सिर्फ field को required रखना पर्याप्त नहीं हो सकता।
हम चाहते हैं कि user Name field में meaningful text enter करे।
उदाहरण के लिए:
✅ Aman Singh
✅ Rahul Kumar
जबकि:
❌ खाली field
❌ केवल numbers
❌ बहुत छोटा या invalid input
जैसी values को check किया जा सकता है।
JavaScript से Name Check करना
सबसे पहले input की value प्राप्त की जाती है।
let name = document.getElementById(“name”).value;
इसके बाद basic condition लगाई जा सकती है:
if (name === “”) {
alert(“Please enter your name”);
}
यह check करेगा कि Name field खाली है या नहीं।
लेकिन अगर आप Name के format को भी check करना चाहते हैं, तो JavaScript में Regular Expression (RegEx) का इस्तेमाल किया जा सकता है।
एक basic example:
let namePattern = /^[A|Za|z ]+$/;
if (!namePattern.test(name)) {
alert(“Please enter a valid name”);
}
यह basic example English letters और spaces वाले name को check करने के लिए है।
अगर आपकी website पर Hindi या दूसरी languages में names accept करने हैं, तो validation pattern को Unicode के हिसाब से design करना चाहिए।
Name Validation में किन चीजों का ध्यान रखें?
Name validation बनाते समय बहुत ज्यादा strict rules लगाना हमेशा अच्छा नहीं होता।
क्योंकि अलग|अलग लोगों के names में:
- Space हो सकता है
- Hyphen हो सकता है
- Apostrophe हो सकता है
- अलग|अलग languages के characters हो सकते हैं
इसलिए real website में validation को जरूरत के हिसाब से design करना चाहिए।
Goal यह होना चाहिए कि गलत input को रोका जाए, लेकिन valid users को unnecessary तरीके से block न किया जाए।
2. Email Validation क्या है?
Email लगभग हर modern website के form में इस्तेमाल होता है।
उदाहरण:
aman@example.com
एक सामान्य email में अलग|अलग parts होते हैं:
Username | aman
@ symbol | @
Domain | example.com
इसलिए Email Validation का उद्देश्य यह check करना है कि user द्वारा दी गई value email के expected format के करीब है या नहीं।
Email Validation क्यों जरूरी है?
मान लीजिए user ने Email field में लिखा:
amanexample.com
यह सामान्य email format जैसा नहीं है क्योंकि इसमें @ मौजूद नहीं है।
या user ने सिर्फ:
aman@
लिख दिया।
ऐसे input को identify करना useful है।
HTML से Basic Email Validation
HTML में Email के लिए अलग input type मौजूद है:
<input type=”email” id=”email”>
Browser basic email format checking में मदद कर सकता है।
इसके साथ required भी लगाया जा सकता है:
<input type=”email” id=”email” required>
इससे field खाली भी नहीं छोड़ी जा सकती और browser basic format validation भी कर सकता है।
JavaScript से Email Validation
JavaScript में भी Email को check किया जा सकता है।
एक basic example:
let email = document.getElementById(“email”).value;
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
alert(“Please enter a valid email”);
}
यह basic pattern common email format को check करने में मदद करता है।
लेकिन ध्यान रखें कि email addresses के valid formats काफी complex हो सकते हैं। इसलिए production websites में बहुत strict custom RegEx बनाने के बजाय practical validation approach रखना बेहतर होता है।
Name और Email Validation को साथ में कैसे रखें?
एक simple form में:
<form id=”myForm”>
<label>Name:</label>
<input type=”text” id=”name”>
<br><br>
<label>Email:</label>
<input type=”email” id=”email”>
<br><br>
<button type=”submit”>Submit</button>
</form>
JavaScript में दोनों fields को check किया जा सकता है।
document.getElementById(“myForm”).addEventListener(“submit”, function(event) {
let name = document.getElementById(“name”).value.trim();
let email = document.getElementById(“email”).value.trim();
if (name === “”) {
event.preventDefault();
alert(“Please enter your name”);
return;
}
if (email === “”) {
event.preventDefault();
alert(“Please enter your email”);
return;
}
});
यह basic validation है। इसके बाद format validation भी add की जा सकती है।
3. Password Validation क्या है?
Password किसी भी Login या Registration System का important हिस्सा होता है।
अगर website user को password बनाने की सुविधा देती है, तो password के लिए कुछ basic rules रखना useful होता है।
उदाहरण:
- Password बहुत छोटा न हो।
- User को strong password बनाने के लिए encourage किया जाए।
- Confirm Password की value से match कराया जा सकता है।
- Sensitive information को plain text में store नहीं करना चाहिए।
Password की Minimum Length क्यों रखी जाती है?
मान लीजिए कोई user password रखता है:
123
यह बहुत छोटा password है।
इसके बजाय website minimum length की condition रख सकती है।
उदाहरण:
Password में कम से कम 8 characters होने चाहिए।
JavaScript:
let password = document.getElementById(“password”).value;
if (password.length < 8) {
alert(“Password must be at least 8 characters”);
}
यह password की length check करता है।
Strong Password Validation
कुछ websites password में अलग|अलग प्रकार के characters की requirement रखती हैं।
उदाहरण:
- Uppercase letter
- Lowercase letter
- Number
- Special character
एक simple example:
let passwordPattern =
/^(?=.*[a|z])(?=.*[A|Z])(?=.*\d)(?=.*[@$!%*?&]).{8,}$/;
if (!passwordPattern.test(password)) {
alert(“Please enter a stronger password”);
}
इसका उद्देश्य एक ऐसा password encourage करना है जिसमें अलग|अलग प्रकार के characters शामिल हों और minimum length पूरी हो।
लेकिन ध्यान रखें कि password policy website की जरूरत और security design के हिसाब से तय करनी चाहिए।
Password Validation में एक Important बात
Password validation करते समय user को unnecessarily complicated rules देना हमेशा अच्छा नहीं होता।
अगर website कहती है:
Password में 12 characters, 3 symbols, 4 numbers और 2 uppercase letters होने चाहिए।
तो user के लिए password बनाना मुश्किल हो सकता है।
इसलिए security और usability के बीच balance रखना जरूरी है।
Confirm Password Validation
Registration Form में कई बार:
Password
और
Confirm Password
दो fields होती हैं।
इसका उद्देश्य यह check करना है कि user ने दोनों जगह same password enter किया है या नहीं।
उदाहरण:
if (password !== confirmPassword) {
alert(“Passwords do not match”);
}
अगर दोनों passwords अलग होंगे, तो user को error message दिखाया जा सकता है।
4. Mobile Number Validation क्या है?
Mobile Number भी forms में बहुत common field है।
जैसे:
- Registration Form
- Contact Form
- School Admission Form
- Job Application
- Delivery Address
- Online Booking
अगर website India के users के लिए है, तो आप Indian mobile numbers के expected format के अनुसार validation बना सकते हैं।
Mobile Number की Basic Validation
HTML में:
<input type=”tel” id=”mobile”>
tel input type mobile या telephone number enter करने के लिए suitable है।
JavaScript में basic length check:
let mobile = document.getElementById(“mobile”).value.trim();
if (mobile.length ! == 10) {
alert(“Please enter a valid mobile number”);
}
लेकिन केवल length check करना पर्याप्त नहीं है।
उदाहरण के लिए:
1234567890
इसमें 10 digits हैं, लेकिन इससे यह साबित नहीं होता कि number वास्तव में active या किसी व्यक्ति का है।
इसलिए validation केवल expected format check कर सकती है; यह number की ownership या existence verify नहीं करती।
Indian Mobile Number का Basic Format Check
अगर आप केवल 10 digit Indian mobile number format check करना चाहते हैं, तो एक simple pattern इस्तेमाल किया जा सकता है:
let mobilePattern = /^[6|9]\d{9}$/;
if (!mobilePattern.test(mobile)) {
alert(“Please enter a valid mobile number”);
}
यह सामान्य Indian mobile numbering pattern के अनुसार 6–9 से शुरू होने वाले 10 digits को check करता है।
Mobile Number Validation में type=”tel” क्यों?
Mobile number के लिए:
<input type=”tel”>
use करना बेहतर होता है।
इससे browser और mobile devices को संकेत मिलता है कि यह telephone input है।
Mobile users के लिए keyboard experience भी बेहतर हो सकता है।
तीनों Validation को एक साथ समझें
अब तक हमने तीन important validations समझीं।
Name
Check करें कि:
- Field खाली न हो
- Input expected format में हो
Check करें कि:
- Field खाली न हो
- Email basic expected format में हो
Password
Check करें कि:
- Minimum length पूरी हो
- जरूरत के अनुसार strength rules पूरे हों
- Confirm Password से match करे
Mobile Number
Check करें कि:
- Field खाली न हो
- Expected number of digits हों
- जरूरत के अनुसार country|specific format follow हो
Form Validation का पूरा Flow
एक complete form में validation का flow कुछ इस तरह हो सकता है:
User Form भरता है
|
Submit button दबाता है
|
JavaScript Submit Event पकड़ती है
|
Name Check
|
Email Check
|
Password Check
|
Mobile Number Check
|
अगर कोई error है | User को message
|
अगर validation pass है | Form आगे process
यह वही DOM + Events + Conditions concept है जिसे आपने पिछले tutorials में सीखा है।
Error Message कैसे बेहतर बनाएं?
Validation में error message बहुत important है।
अगर user ने गलत Email डाला है, तो सिर्फ:
Error!
दिखाना helpful नहीं है।
इसके बजाय:
Please enter a valid email address.
ज्यादा clear है।
इसी तरह:
❌ Invalid Input
की जगह:
✅ Mobile number must contain 10 digits.
दिखाया जा सकता है।
इससे user को पता चलता है कि problem क्या है।
Beginners के लिए Practical Tips
Validation सीखते समय इन बातों को याद रखें:
1. पहले Required Fields समझें
सबसे पहले यह check करना सीखें कि field खाली है या नहीं।
2. फिर Format Validation सीखें
इसके बाद Email, Mobile Number आदि के format check करना सीखें।
3. User|Friendly Messages रखें
Error message simple और clear रखें।
4. हर Input पर बहुत ज्यादा Restrictions न लगाएं
Valid information को unnecessarily reject नहीं करना चाहिए।
5. Client|Side Validation को Security न समझें
JavaScript validation browser में चलती है और इसे bypass किया जा सकता है। इसलिए important applications में server|side validation भी जरूरी है।
एक Simple Practice Project
अब आप इन concepts की practice करने के लिए एक छोटा Registration Form बना सकते हैं।
इसमें रखें:
- Full Name
- Password
- Confirm Password
- Mobile Number
- Submit Button
फिर JavaScript से ये checks लगाएं:
Step 1: Name खाली है या नहीं।
Step 2: Email का format check करें।
Step 3: Password की minimum length check करें।
Step 4: Confirm Password match करें।
Step 5: Mobile Number का format check करें।
Step 6: Error होने पर clear message दिखाएं।
यह छोटा project आपको JavaScript के DOM, Events, Conditions और Form Validation को एक साथ practice करने में मदद करेगा।
निष्कर्ष
JavaScript में Name, Email, Password और Mobile Number Validation form handling के बहुत useful concepts हैं।
Name Validation से user की basic information को check किया जा सकता है। Email Validation से email के expected format को verify किया जा सकता है। Password Validation user को बेहतर password rules follow करने में मदद करती है, जबकि Mobile Number Validation expected number format को check करती है।
लेकिन यह याद रखना जरूरी है कि client|side validation अकेली security नहीं है। Real|world applications में server|side validation और proper security practices भी जरूरी होती हैं।
Frequently Asked Questions (FAQ)
1. JavaScript में Form Validation क्या है?
JavaScript Form Validation एक process है जिसमें user द्वारा form में दी गई information को check किया जाता है कि वह खाली तो नहीं है और required format में है या नहीं।
2. JavaScript में Name Validation क्यों जरूरी है?
Name Validation यह check करने में मदद करती है कि user ने Name field में उचित information दी है या नहीं। इससे खाली या unwanted input को identify किया जा सकता है।
3. Email Validation क्या होती है?
Email Validation में यह check किया जाता है कि user द्वारा दिया गया email सामान्य expected format में है या नहीं, जैसे name@example.com।
4. Password Validation क्यों जरूरी है?
Password Validation की मदद से minimum length और जरूरत के अनुसार दूसरे password rules check किए जा सकते हैं। इससे users को बेहतर password बनाने के लिए guide किया जा सकता है।
5. JavaScript से Mobile Number Validation कैसे करें?
JavaScript में Mobile Number की length और expected format को check किया जा सकता है। उदाहरण के लिए Indian 10-digit mobile number के लिए basic pattern validation लगाई जा सकती है।