วิธีทำการตรวจสอบฟอร์มเบื้องต้นด้วย 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>