title: Javascript validation form not working with HTML
body: <p>I am required to complete an assignment that shows basic Javascript form processing. The objective is to have a "details.html" page which checks that all input fields are valid (e.g. Names are all text). I have tried to complete both documents but they just don't seem to be linking correctly:</p>
  
  <p>Nothing is triggering the "validateForm()" function, and any input just passes through on submission, what have I done wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function validateForm() {
    var firstname = document.getElementById("fName").value;
    var lastname = document.getElementById("lName").value;
    var email = document.getElementById("email").value;
    var address = document.getElementById("address").value;
    var postCode = document.getElementById("pCode").value;
    var accepted = document.getElementById("accept").checked;
  
    var allLetters = /^[a-zA-z]+$/i;
    var allNumbers = /^[0-9]+$/;
    var validEmail = /^(([^&lt;&gt;()\[\]\\.,;:\s@"]+(\.[^&lt;&gt;()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    var validAddress = new RegExp(allNumbers.source + "|" + allLetters.source);
  
  
    if (address.match(validAddress) &amp;&amp; firstname.match(allLetters) &amp;&amp; lastname.match(allLetters) &amp;&amp; email.match(validEmail) &amp;&amp; address != "" &amp;&amp; postCode.match(allNumbers) &amp;&amp; accepted) {
      return true;
    } else {
      window.alert("Error! Invalid input in form. Please try again.");
      return false;
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.header {
    background-color: tomato;
    color: white;
    padding: 2px;
  }
  
  .focusPage {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    background-color: lightgrey;
    min-height: 600px;
    height: 600px;
    height: auto !important;
  }
  
  .userDetails {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    border: 2px solid black;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  .inputs {
    float: right;
    direction: ltr;
    margin-right: 5px;
  }
  
  .acceptTerms {
    font-size: 15px;
    font-family: "Times New Roman", Times, serif;
  }
  
  p {
    font-size: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
  
  .thePage {
    background-color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="someName" content="someContent"&gt;
    &lt;title&gt; Home &lt;/title&gt;
    &lt;script type="text/javascript" src="myScripts.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body class="thePage"&gt;
    &lt;div&gt;
      &lt;div class="focusPage"&gt;
        &lt;div class="header"&gt;
          &lt;h1&gt;Welcome user!&lt;/h1&gt;
        &lt;/div&gt;
        &lt;p&gt;This form will allow you to enter your personal details for storage in our database.&lt;/p&gt;
        &lt;p&gt;Be sure to read our &lt;a href="agreement.html"&gt;User Agreement&lt;/a&gt; before submitting your details&lt;/p&gt;
  
        &lt;ul class="userDetails"&gt;
          &lt;form class="userForm" onsubmit="validateForm()" method="post"&gt;
            &lt;li&gt;&lt;label for="inputNames" required&gt;First Name - &lt;/label&gt;
              &lt;label for="inputs"&gt;&lt;input type="text" class="inputs" id="fname" name="fname"&gt;&lt;/label&gt;&lt;/li&gt;
  
            &lt;li&gt;&lt;label for="inputNames"&gt;Last Name - &lt;/label&gt;
              &lt;label for="inputs" required&gt;&lt;input type="text" class="inputs" id="lname" name="lname"&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;label for="inputNames"&gt;Email - &lt;/label&gt;
              &lt;label for="inputs" required&gt;&lt;input type="email" class="inputs" id="email" name="email"&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;label for="inputNames"&gt;Address number - &lt;/label&gt;
              &lt;label for="inputs" required&gt;&lt;input type="text" class="inputs" id="address" name="address"&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;label for="inputNames"&gt;Post code - &lt;/label&gt;
              &lt;label for="inputs" required&gt;&lt;input type="text" class="inputs" id="pCode" name="pCode"&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;label for="inputNames"&gt;Additional Detail - &lt;/label&gt;&lt;/li&gt;
            &lt;textarea rows="5" cols="50" class="textfield" placeholder="Add detail here..."&gt;&lt;/textarea&gt;
  
            &lt;div class="agreement"&gt;
              &lt;input type="checkbox"&gt; &lt;label class="acceptTerms" id="accept"&gt;I Accept the User Agreement&lt;/label&gt;
            &lt;/div&gt;
            &lt;input type="submit" value="Submit"&gt;
          &lt;/form&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>