Accessing and validating form elements In Hindi
किसी भी वेबसाइट में कांटेक्ट के लिए फ़ॉर्म वेब एप्लिकेशन का इम्पोर्टेन्ट एलिमेंट फीचर्स हैं, बिना कांटेक्ट फॉर्म या अन्य फॉर्म के ऑनलाइन कम्युनिकेशन, लीड, और इनफार्मेशन को कलेक्ट करना मुश्किल है, इसमें जावास्क्रिप्ट वेबपेज वेबसाइट इंटरनेट यूजर को फॉर्म से इंटरैक्ट करने के कई मेथड प्रोवाइड करता है। जहा वेबसाइट में लोकेटेड फ़ॉर्म एलिमेंट्स को इंटरनेट यूजर एक्सेस और फील कर सकते हैं, फॉर्म में स्टोर वैल्यूज को रीड, एनालाइज, या मॉडिफाई कर सकते हैं, अंत में, ऑनलाइन फ़ॉर्म सर्वर पर सबमिट करने से पहले सभी फील फॉर्म इनफार्मेशन को वेलिडेट कर सकते हैं।
So, let’s understand more about forms in JavaScript.
- Accessing form elements in a website webpage.
- Validating online form elements.
- Using validation in HTML5 forms.
- Managing form submissions in a website.
Accessing form elements in JavaScript.
जावास्क्रिप्ट वेब डेवलपर किसी भी वेबपेज फ़ॉर्म एलिमेंट्स को मल्टीप्ल मेथड से एक्सेस और कण्ट्रोल कर सकते हैं, जिसमे मुख्य रूप से getElementById(), getElementsByName(), querySelector(), या querySelectorAll() जावास्क्रिप्ट फंक्शन मेथड को यूज़ कर सकते है।
Accessing an entire form in JavaScript.
जावास्क्रिप्ट वेब डेवलपर वेबपेज या वेबसाइट में यूज़ फ़ॉर्म एलिमेंट की आईडी या अन्य सलेक्टर मेथड को यूज़ करके कम्पलीट फ़ॉर्म को मैनेज कर सकते हैं.
<form id=”sampleForm”>
<input type=”text” id=”employeename” name=”employeename” required />
<input type=”password” id=”password” name=”password” required />
<button type=”submit”>Submit Form </button>
</form>
const form = document.getElementById(‘sampleForm’);
Accessing form elements by ID in a JavaScript webpage.
जावास्क्रिप्ट वेब डेवलपर मल्टीप्ल वेबपेज फ़ॉर्म एलिमेंट को उनकी आईडी ऐट्रिब्यूट्स के द्वारा मैनेज कर सकते हैं।
const employeename = document.getElementById(’employeename’);
const password = document.getElementById(‘password’);
Accessing form elements by name in a JavaScript webpage.
जावास्क्रिप्ट वेब डेवलपर वेबपेज में फ़ॉर्म एलिमेंट को मैनेज और एक्सेस करने के लिए नाम ऐट्रिब्यूट्स फीचर्स को यूज़ कर सकते हैं।
const employeename = document.getElementsByName(’employeename’)[0];
const password = document.getElementsByName(‘password’)[0];
यहाँ याद रखे की, getElementsByName() एक NodeList वैल्यू को रिटर्न करता है, इस वजह से यूजर को एलिमेंट को इंडेक्स जैसे, [0]) द्वारा इंडीकेट किया गया है।
Accessing form elements with query selector in JavaScript web page.
जावास्क्रिप्ट फ़ॉर्म एलिमेंट को इंटरनेट यूजर ज्यादा फ्लेक्सिबिलिटी के साथ मैनेज करने के लिए querySelector() और querySelectorAll() फंक्शन को यूज़ कर सकते हैं।
const employeename = document.querySelector(‘#employeename’);
const password = document.querySelector(‘[name=”password”]’);
यहाँ, querySelector() फंक्शन क्लास, फॉर्म आईडी या स्पेशल वैल्यू जैसे मोर काम्प्लेक्स सलेक्टर परमिशन प्रोवाइड करता है।
Validating form elements in JavaScript web page.
जावास्क्रिप्ट वेबपेज में क्रिएटेड फ़ॉर्म का वेलिडेशन, फॉर्म को मैन्युअल सर्वर पर सबमिट करने से पहले फ़ॉर्म एलिमेंट के वैल्यूज को टेस्ट करके जावास्क्रिप्ट में मैन्युअल रूप से टेस्टिंग किया जा सकता है, या वेब डेवेलपर इंटरनेट यूजर HTML5 मार्कअप लैंग्वेज स्क्रिप्ट द्वारा वेलिडेशन ऐट्रिब्यूट्स को फॉलो कर सकते हैं।
JavaScript HTML5 built-in form validation.
जावास्क्रिप्ट वेब डेवलपमेंट में HTML5 स्क्रिप्टिंग मार्कअप लैंग्वेज यूजर को फ़ॉर्म वेलिडेशन के लिए बिल्ट-इन फीचर्स प्रोवाइड करता है, जैसे कि रिक्वायर्ड, मिनिमम लेंथ, मैक्सिमम लेंथ, पैटर्न, टाइप और प्लेसहोल्डर, आदि फील्ड है।
<form id=”sampleForm”>
<input type=”text” id=”employeename” name=”employeename” required minlength=”7″ placeholder=”employeename” />
<input type=”password” id=”password” name=”password” required minlength=”12″ />
<button type=”submit”>Submit Form</button>
</form>
यहाँ फॉर्म को वेब ब्राउज़र में सबमिट करने से पहले फ़ॉर्म को आटोमेटिक आर्डर में वेलिडेट करता, और यहाँ यदि फॉर्म कंडीशन कम्पलीट नहीं होती हैं, जैसे, एम्प्टी फ़ील्ड या बहुत छोटा इनपुट है, तो यह एक एरर मैसेज को डिस्प्ले करेगा। इसके लिए यूजर को जावास्क्रिप्ट प्रोग्रामिंग की जरूरत नहीं है, पर यहाँ जावास्क्रिप्ट यूजर फॉर्म वेलिडेट प्रोसेस को कस्टमाइज करने की परमिशन प्रोवाइड करता है।
Custom validation in JavaScript webpage.
यदि यूजर को वेबसाइट वेबपेज में किसी कस्टम फॉर्म को वेलिडेट करना चाहते हैं, या अतिरिक्त फॉर्म टेस्टिंग फीचर्स को ऐड करना चाहते हैं, तो यूजर फॉर्म को सबमिट करने से पहले फ़ॉर्म में मौजूद एलिमेंट को वेलिडेट करने के लिए जावास्क्रिप्ट को यूज़ कर सकते हैं।
Test whether a form field is empty or not in JavaScript form Example.
const form = document.getElementById(‘sampleForm’);
form.addEventListener(‘submit’, function (event) {
const employeename = document.getElementById(’employeename’).value;
const password = document.getElementById(‘password’).value;
// here we use the Custom validation features to check if fields are empty or fill
if (employeename === ” || password === ”) {
event.preventDefault(); // here we Prevent form for submission
alert(‘here you ready to flll above fields.’);
}
});
यहाँ इस एक्साम्प्ल में फ़ॉर्म को सबमिट करने की परमिशन से पहले टेस्ट करता है कि एम्प्लॉई नाम और एम्प्लॉई पासवर्ड फ़ील्ड एम्प्टी हैं या नहीं है। यदि यहाँ फॉर्म वेलिडेट प्रोसेस फ़ैल हो जाता है, तो यहाँ event.preventDefault() फ़ॉर्म को सबमिट होने से पहले स्टॉप करता है।
Validating password on a form example with regular expressions.
जावास्क्रिप्ट वेब डेवलपर ज़्यादा काम्प्लेक्स ज़रूरतों को वेलिडेट करने के लिए रेगुलर एक्सप्रेशन का यूज़ कर सकते हैं, जैसे कि यह तय करना कि पासवर्ड कम से कम 12 करैक्टर का हो और उसमें लेटर और न्यूमेरिक स्पेशल करैक्टर का कॉम्बिनेशन जरूर होना चाहिए।
form.addEventListener(‘submit’, function (event) {
const password = document.getElementById(‘password’).value;
// here we use Password regex at least one letter, one number, and special character 12+ characters
const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{12,}$/;
if (!passwordPattern.test(password)) {
event.preventDefault(); // it used to Prevent form submission
alert(‘you should be insert a password 12 character with small capital letter or special character.’);
}
});
Form Validation in HTML5 Markup Script.
जावास्क्रिप्ट वेब डेवलपमेंट में HTML5 मूल फॉर्म वेलिडेट फीचर्स को प्रोवाइड करता है, जो अतिरिक्त जावास्क्रिप्ट प्रोग्राम सोर्स कोड की जरूरत के बिना आटोमेटिक आर्डर में काम करता है।
Common HTML5 attributes in forms.
- Required – यह मौजूदा फॉर्म फ़ील्ड को अनिवार्य रूप से क्रिएट करता है।
- Pattern – यह फॉर्म में इनपुट को रेगुलर एक्सप्रेशन के विरुद्ध फॉर्म को वेलिडेट करता है।
- MinimumLength and MaximumLength – यह तय करता है कि इनपुट फॉर्म इंडीकेट लेंथ के अंदर होना चाहिए।
- Type – यह तय करता है कि फॉर्म इनपुट में एक स्पेशल टाइप जैसे, ईमेल, यूआरएल एड्रेस है।
Example of JavaScript built-in HTML5 validation.
<form id=”sampleForm”>
<input type=”email” id=”email” name=”email” required placeholder=”Email” />
<input type=”text” id=”employeename” name=”employeename” required minlength=”7″ />
<button type=”submit”>Submit Form</button>
</form>
यहाँ इंटरनेट यूजर फ़ॉर्म सबमिट करने का ट्राय करता है, यहाँ वेब ब्राउज़र से रिलेटेड एलिमेंट को टेस्ट करता है.
यहाँ फॉर्म में मौजूद ईमेल फ़ील्ड एक वैल्यू ईमेल एड्रेस होना चाहिए।
एम्प्लॉई नाम फ़ील्ड में कम से कम 7 करैक्टर का जरूर होने चाहिए।
Managing form submission in JavaScript.
जावास्क्रिप्ट फ़ॉर्म वैलिड हो जाने के बाद इंटरनेट यूजर फॉर्म डेटा को मल्टीप्ल आर्डर में जैसे, अजाक्स प्रोग्रामिंग के माध्यम से मैनेज करने के लिए फ़ॉर्म को सबमिट करने की परमिशन प्रोवाइड करते हैं, या फॉर्म में सबमिशन को स्टॉप कर सकते हैं।
Form submission process with JavaScript validation.
इस एक्साम्प्ल में, यदि सभी फॉर्म फ़ील्ड वैलिड हैं, तो यूजर फ़ॉर्म सबमिशन की परमिशन को प्रोवाइड करता हैं, इसके अलावा, यूजर इसे रोक भी सकता हैं।
form.addEventListener(‘submit’, function (event) {
const employeename = document.getElementById(’employeename’).value;
const password = document.getElementById(‘password’).value;
// here we use Custom validation to check if fields are empty or not
if (employeename === ” || password === ”) {
event.preventDefault(); // it use to Prevent form submission
alert(‘here you need to fill both form field.’);
} else {
alert(‘your Form data submitted successfully’);
}
});
यदि यहाँ फ़ॉर्म वेलिडेशन में सक्सेस्फुल हो जाता है, तो फ़ॉर्म ऑटोमेटिकली आर्डर में सबमिट हो जाता है, इसके अलावा, यहाँ यह एक अलर्ट मैसेज को डिस्प्ले करता हैं, और फ़ॉर्म सबमिशन प्रोसेस को स्टॉप कर देता हैं।
Accessing Form Values in JavaScript After Form Submission.
जावास्क्रिप्ट वेबपेज में फ़ॉर्म सबमिट हो जाने के बाद यूजर फॉर्मडाटा, एलिमेंट्स या इंडिविजुअल फॉर्म वैल्यू प्रॉपर्टीज का यूज़ करके फ़ॉर्म एलिमेंट्स के वैल्यू को एक्सेस कर सकते हैं।
Accessing form data with JavaScript FormData.
const formData = new FormData(form);
formData.forEach((value, key) => {
console.log(key, value); // here is key = field name, value = field value assign form element
});
यहाँ यह प्रोसेस यूजर सभी फ़ॉर्म डेटा तक इजी एक्सेस को प्रोवाइड करता है, जो की अजाक्स के माध्यम से फॉर्म सबमिट करते समय स्पेशली यूज़फुल है।
Accessing individual field values in a JavaScript form.
const employeename = form.elements[’employeename’].value;
const password = form.elements[‘password’].value;
यहाँ form.elements ऑब्जेक्ट सभी फ़ॉर्म फ़ील्ड्स का एक कलेक्शन है, जिसे यूजर उनके नाम ऐट्रिब्यूट्स द्वारा एक्सेस कर सकते हैं।
Summary of accessing and validating form elements.
- Accessing form elements – जावास्क्रिप्ट डेवलपर getElementById(), getElementsByName(), querySelector(), और querySelectorAll() फंक्शन मेथड को यूज़ करके फ़ॉर्म एलिमेंट्स को मैनेज और एक्सेस कर सकते हैं।
- Validating form elements – जावास्क्रिप्ट वेबपेज में कस्टम फॉर्म वेलिडेशन के लिए जावास्क्रिप्ट प्रोग्रामिंग का उपयोग करें और बिल्ट-इन फॉर्म एलिमेंट वेलिडेशन के लिए फॉर्म के फील्ड में रिक्वायर्ड, मिनिमम लेंथ, मैक्सिमम लेंथ, और पैटर्न जैसी HTML5 फॉर्म एलिमेंट ऐट्रिब्यूट्स पर डिपेंड रहते है।
- Handling form submission – यदि वेबपेज में फॉर्म वेलिडेशन फ़ैल हो जाता है, तो यूजर फ़ॉर्म सबमिशन को रोकने के लिए event.preventDefault() फंक्शन मेथड को अप्लाई कर सकते हैं, और फ़ॉर्म डेटा को जरूरत के अनुसार मैनेज कर सकते हैं।
- HTML5 validation – HTML5 मार्कअप लैंग्वेज टेक्स्ट इनपुट, ईमेल और पासवर्ड जैसे कई सामान्य फ़ॉर्म फ़ील्ड के लिए आटोमेटिक फॉर्म वेलिडेशन फीचर्स प्रोवाइड करता है।
