Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

JavaScript के साथ HTML फॉर्म एक्शन और onsubmit वैलिडेशन

आइए एक उदाहरण देखें जहां हम onsubmit पर इनपुट टेक्स्ट को वैलिडेट कर रहे हैं:

उदाहरण

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>Document</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <form onsubmit="return validateTheForm()" method="GET" action="https://mail.google.com/mail/"> <br/> <input type="text" id="txtInput" value=""/> <input type="submit" value="search"/> </form> <script>    function validateTheForm(){       var validation = (document.getElementById('txtInput').value == 'gmail');       if(!validation){          alert('Something went wrong...Plese write gmail intext box and click');          return false;       }       return true;    } </script> </body> </html>

उपरोक्त प्रोग्राम चलाने के लिए, फाइल का नाम "anyName.html(index.html)" सेव करें और फाइल पर राइट-क्लिक करें। VS कोड एडिटर में "Open with Live Server" विकल्प चुनें।

आउटपुट

यह निम्न आउटपुट उत्पन्न करेगा:

JavaScript के साथ HTML फॉर्म एक्शन और onsubmit वैलिडेशन

चरण 1

टेक्स्ट बॉक्स में GMAIL टाइप करें:

JavaScript के साथ HTML फॉर्म एक्शन और onsubmit वैलिडेशन

सर्च बटन पर क्लिक करने के बाद, आउटपुट निम्न है:

JavaScript के साथ HTML फॉर्म एक्शन और onsubmit वैलिडेशन

चरण 2

GMAIL के अलावा कोई अन्य वैल्यू टाइप करने पर, आपको अलर्ट मैसेज मिलेगा।

पहले वैल्यू टाइप करें और एंटर दबाएं:

JavaScript के साथ HTML फॉर्म एक्शन और onsubmit वैलिडेशन

सर्च बटन पर क्लिक करने के बाद, आपको नीचे दिए गए आउटपुट में अलर्ट मैसेज मिलेगा:

JavaScript के साथ HTML फॉर्म एक्शन और onsubmit वैलिडेशन

  1. JavaScript के साथ innerHTML सेट करें JavaScript के साथ innerHTML सेट करें

    innerHTML सेट करने का सही सिंटैक्स निम्नानुसार है - document.getElementById(yourIdName).innerHTML=yourValue; आइए अब देखें कि innerHTML कैसे सेट करें - उदाहरण <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-widt

  1. HTML और CSS से साइनअप फॉर्म कैसे बनाएं? HTML और CSS से साइनअप फॉर्म कैसे बनाएं?

    साइनअप फॉर्म में ईमेल, पासवर्ड, पासवर्ड दोहराएं, रिमेंबर मी चेकबॉक्स, शर्तें स्वीकृति, और कैंसल/साइनअप बटन शामिल हैं। गहरे हरे और लाल बटन स्पष्ट क्रिया अंतर प्रदान करते हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Geneva, Ver

  1. HTML फॉर्म action एट्रिब्यूट HTML फॉर्म action एट्रिब्यूट

    HTML फॉर्म action एट्रिब्यूट परिभाषित करता है कि जब HTML दस्तावेज़ में एक फॉर्म सबमिट किया जाता है तो फॉर्म डेटा कहां भेजा जाए।सिंटैक्सनिम्नलिखित सिंटैक्स है:<form action=”URL”></form>आइए HTML फॉर्म action एट्रिब्यूट का एक उदाहरण देखें:उदाहरण<!DOCTYPE html> <html>