title: HTML button onClick listener calling HTML form onSubmit javascript function
body: <p>I am a novice in web development, I have created a simple html page. The page has two buttons, <strong>Submit</strong> and <strong>Display Data</strong>. The <strong>Submit</strong> button is supposed to post form data to a particular page after validating the form. This button is working fine. I am facing a problem with the <strong>Display Data</strong> button. The button is supposed to open a separate page and there should not be any kind of form validation. The page is getting open but the form is also getting validated.</p>
  
  <p><strong>The html page</strong>:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
  function validateForm()
  {
  var name=document.forms["myForm"]["name"].value;
  var email=document.forms["myForm"]["email"].value;
  var mobile=document.forms["myForm"]["mobile"].value;
  var address=document.forms["myForm"]["address"].value;
  var atpos=email.indexOf("@");
  var dotpos=email.lastIndexOf(".");
  if (name==null || name=="")
    {
    alert("Name must be filled out");
    return false;
    }
  
  else if (atpos&lt;1 || dotpos&lt;atpos+2 || dotpos+2&gt;=email.length)
    {
    alert("Not a valid e-mail address");
    return false;
    }
  
    else if(isNaN(mobile)||mobile.indexOf(" ")!=-1)
    {
    alert("Enter numeric value")
    return false; 
    }
    else if (mobile.length != 10)
    {
    alert("Enter 10 digit mobile");
    return false;
    }
    else if (mobile.charAt(0)=="0")
    {
    alert("Mobile no should not start with 0");
    return false;
    }
    else if (address==null || address=="")
    {
    alert("Address must be filled out");
    return false;
    }
  
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;h2&gt;Employee Details Entry&lt;/h2&gt;
  &lt;form name="myForm" action="insertDisplay.php" onSubmit="return validateForm()" method="post"&gt;
  Name: &lt;input type="text" name="name"&gt;&lt;br/&gt;
  Email: &lt;input type="text" name="email"&gt;&lt;br/&gt;
  Mobile: &lt;input type="text" name="mobile"&gt;&lt;br/&gt;
  Address: &lt;input type="text" name="address"&gt;&lt;br/&gt;
  &lt;input type="submit" value="Submit"&gt; &lt;button onClick="location.href = 'insertDisplay.php'"&gt;Display Data&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Where am I going wrong? Why is the form validation function getting called?</strong></p>