Javascript to prevent form post if not validated

Question

I have the following validation code for a simple form. I am able to perform basic validation but the form still gets posted even if the data is wrong and an alert is generated. How can I stop that from happening?

JS CODE

function validate(){
    validateForm();

}

function validateForm() {

    var x = document.forms["myForm"]["fname"].value;
    var y = document.forms["myForm"]["pname"].value;
    var email = document.forms["myForm"]["email"].value;
    var phone = document.forms["myForm"]["phone"].value;
    var date = document.forms["myForm"]["date"].value;
    var month = document.forms["myForm"]["month"].value;
    var year = document.forms["myForm"]["year"].value;



    window.load = function() {
  var myForm = document.getElementById('myForm');
  myForm.onsubmit = function(e) {
      return validateForm(); // will be false if the form is invalid
  }  
}


    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;}
    else if (y == null || y == "") {
        alert("Address must be filled out");
        return false;       
    }
    else if(email == '' || email.indexOf('@') == -1 || email.indexOf('.') == -1) 
    {
        alert("Insert Valid Email Address");
        return false;   
        }
    else if(phone == ''|| phone <1000000000 || phone >9999999999){

        alert("Enter valid phone number");
        return false;   

        }else if(date =='' || date<01 || date >31){

        alert("Enter valid date ");
        return false;   

        }else if(month =='' || month<1 || month >12){

        alert("Enter valid month ");
        return false;   

        }else if(year =='' || year<1800 || year >2015){
        alert("Enter valid year ");
        return false;   

        }   
}

Form

        <form name="myForm" action="http://www.randyconnolly.com/tests/process.php" onsubmit="return validate()" method="post">
    <table width="30%" border="0" align="center" cellpadding="10" cellspacing="20">
      <tr>
        <td width="20%"> <span style="font-size: 22px">Name:</span><br>
          <br /></td>
        <td width="80%"><input type="text" name="fname" required /></td>
      </tr>
      <tr>
        <td><span style="font-size: 22px">Picture Name: <br>
          <br></span></td>
        <td><input type="text" name="pname" required /></td>
      </tr>
      <tr>
        <td><span style="font-size: 22px">Email:</span> <br>
          <br></td>
        <td><input type="text" name="email" required /></td>
      </tr>
      <tr>
        <td><span style="font-size: 22px">Phone:</span> <br>
          <br></td>
        <td><input type="number" name="phone" required /></td>
      </tr>
      <tr>
        <td><span style="font-size: 22px">Date(mm/dd/yyyy):</span></td>
        <td><input type="text" name="month" size="2" required />
    /
      <input type="text" name="date" size="2" required  />
    /
    <input type="text" name="year" size="4" required /></td>
      </tr>
      <tr>
        <td><span style="font-size: 22px">Artwork</span></td>
        <td><input type="file" accept="image/gif" name="pic" ></td>
      </tr>
    </table>
    <br><br>
    <input class="button-0"  type="submit" value="Submit" />
    <br>
    </form>

Answer 1

I got it working. Instead of calling validate() and in that calling validateForm() I directly called validateForm() at the onsubmit. Thanks for the help.

Answer 2

You have several issues with your code.

1. Your validation function needs to return false to prevent the form submission.

2. You are registering the window.onload handler inside of the validateForm function. Since, the the time the validateForm function is called, the form is already being submitted.

3. The handler in your markup is validate. Your validate method doesn't return anything so submission won't be prevented by that either.

The easiest way to fix everything would to be to remove the window.onload handler from your code altogether. You could then change validate to:

function validate() {
    return validateForm();
}

And submission should be prevented properly.