Search code examples
javascripthtmlformsvalidation

submit button is not working on click and the form is not submitted

In the program , there is a validate function in which if there is missing field it will give alert message. and in validateEmail if the email is wrong it will also give the alert message. It is showing everything but submit button is not working . It does work when I set return to true at the end of the validate function but then, if there is email error it shows the error but also submits the form without giving a chance to the user to correct the email.

<html>

<head>
  <title>Form Validation</title>
  <script type="text/javascript">
    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 false;

    }

    function validateEmail() {
      var emailID = document.myForm.EMail.value;
      atpos = emailID.indexOf("@");
      dotpos = emailID.lastIndexOf(".");

      if (atpos < 1 || (dotpos - atpos < 2)) {
        alert("Please enter correct email ID")
        document.myForm.EMail.focus();
        return false;
      }
      return (true);
    }
  </script>
</head>

<body>
  <form action="submit.html" name="myForm" onsubmit="return(validateEmail(),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>

Solution

  • The problem is in the html form tag, in the onsubmit attribute it should be like this :

    onsubmit="return(validateEmail() && validate());"