JavaScript का उपयोग करके बुनियादी फॉर्म सत्यापन कैसे करें?

JavaScript वेब सर्वर पर भेजने से पहले क्लाइंट के कंप्यूटर पर फॉर्म के डेटा को सत्यापित करने का एक तरीका प्रदान करता है।

बुनियादी फॉर्म सत्यापन में फॉर्म की जांच शामिल है ताकि यह सुनिश्चित हो सके कि सभी अनिवार्य फ़ील्ड भरे गए हैं। इसके लिए फॉर्म में प्रत्येक फ़ील्ड के माध्यम से लूप की आवश्यकता होगी और डेटा की जांच करनी होगी।

उदाहरण

JavaScript में बुनियादी फॉर्म सत्यापन लागू करने के लिए निम्न कोड चलाएं:

<html>
  <head>
    <title>Form Validation</title>
    <script>
      // Form validation
      function validate() {
        if (document.myForm.Name.value == "") {
          alert("Please provide your name!");
          document.myForm.Name.focus();
          return false;
        }
        if (document.myForm.EMail.value == "") {
          alert("Please provide your Email!");
          document.myForm.EMail.focus();
          return false;
        }
        if (document.myForm.Zip.value == "" ||
          isNaN(document.myForm.Zip.value) ||
          document.myForm.Zip.value.length != 5) {
          alert("Please provide a zip in the format #####.");
          document.myForm.Zip.focus();
          return false;
        }
        if (document.myForm.Country.value == "-1") {
          alert("Please provide your country!");
          return false;
        }
        return (true);
      }
    </script>
  </head>
  <body>
    <form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
      <table cellspacing="2" cellpadding="2" border="1">
        <tr>
          <td align="right">Name</td>
          <td><input type="text" name="Name" /></td>
        </tr>
        <tr>
          <td align="right">EMail</td>
          <td><input type="text" name="EMail" /></td>
        </tr>
        <tr>
          <td align="right">Zip Code</td>
          <td><input type="text" name="Zip" /></td>
        </tr>
        <tr>
          <td align="right">Country</td>
          <td>
            <select name="Country">
              <option value="-1" selected>[choose yours]</option>
              <option value="1">USA</option>
              <option value="2">UK</option>
              <option value="3">INDIA</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td><input type="submit" value="Submit" /></td>
        </tr>
      </table>
    </form>
  </body>
</html>