title: How do I validate this HTML/JavaScript form onsubmit?
body: <p>I have managed to figure out how to 'error' alert if the passwords do not match, but this does not prevent a user from still submitting the form altogether. Can someone please explain how I can write a statement that checks that everything returns true before allowing the user to submit the form with an onsubmit function?</p>
  
  <p><strong>Please note that I understand that I have not written a function called validateForm that is noted in the onsubmit HTML of the form, I just know that this needs to be there for when I have written this function</strong></p>
  
  <p>Here is the link to the jsfiddle: <a href="http://jsfiddle.net/shanny/VSUM6/28/" rel="noreferrer">http://jsfiddle.net/shanny/VSUM6/28/</a></p>
  
  <p>And here is the code again:</p>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;html&gt;
     &lt;h1&gt;Form Validation&lt;/h1&gt;
     &lt;div id="error"&gt;&lt;/div&gt;
     &lt;form name="myForm" action="" method="post" target="_blank" onsubmit="return validateForm()"&gt;
         First Name: &lt;input type="text" name="firstName" autofocus required &gt;
         &lt;br /&gt;
         Last Name: &lt;input type="text" name="lastName" required &gt;
         &lt;br /&gt;
         Email: &lt;input id="email" type="email" name="email" placeholder="e.g., name@provider.com" required&gt;
         &lt;br /&gt;
         Password: &lt;input type="password" name="password1" id="password1" required &gt;
         &lt;br /&gt;
         Confirm Password: &lt;input type="password" name="password2" id="password2" required &gt;  &lt;p id="error2"&gt;&lt;/p&gt;
         &lt;br /&gt;&lt;br /&gt;
         Sex: 
         &amp;nbsp;&amp;nbsp;&lt;input type="radio" name="sex" value="male" &gt;Male 
         &amp;nbsp;&lt;input type="radio" name="sex" value="female"&gt;Female
         &lt;br /&gt;&lt;br /&gt;
         Quantity:&lt;br /&gt;
         &lt;input name ="scale" type="range" min="1" max="6" step="1" value="1" &gt;
             &lt;br /&gt;
             &amp;nbsp;&amp;nbsp;1&amp;nbsp;&amp;nbsp;&amp;nbsp; 2&amp;nbsp;&amp;nbsp;&amp;nbsp; 3&amp;nbsp;&amp;nbsp;&amp;nbsp; 4&amp;nbsp;&amp;nbsp;&amp;nbsp; 5&amp;nbsp;&amp;nbsp;&amp;nbsp; 6
         &lt;br /&gt;&lt;br /&gt;
         Interests (select all that apply):
         &lt;br /&gt;
         &lt;input type="checkbox" class="radio" name="interests" value="running"&gt;This
         &lt;input type="checkbox" class="radio" name="interests" value="swimming"&gt;That
         &lt;input type="checkbox" class="radio" name="interests" value="hiking"&gt;Other
             &lt;br /&gt;&lt;br /&gt;
         &lt;input name="submit" id="submit" type="submit" value="Hayo!"&gt;
     &lt;/form&gt;
     &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var errorBox=document.getElementById("error");
  var errorText=document.getElementById("error2");
  var pass2=document.getElementById("password2");
  var pass1=document.getElementById("password1");
  
  pass2.onchange = function() {
  if (pass2.value !== pass1.value) {
      pass2.style.border="2px solid red";
      errorText.innerHTML="Passwords do not match!";
      errorText.style.color="red";
      //errorBox.style.height="40px";
      //errorBox.style.visibility="visible";
      //errorBox.innerHTML="&lt;p&gt;Passwords do not match!&lt;/p&gt;";
      return false;
  }
  else {        
      pass2.style.border="2px solid #B5DCF7";
      errorText.style.color="green";
      errorText.innerHTML="Passwords match!";
      return true; 
  }
  };
  </code></pre>