title: JavaScript form validation skipping / returning "true"
body: <p>I created a forgotten username / password form with some basic JavaScript validation which worked up until the point that I embedded it into a designed page (i.e. first version was just basic design with no thrills).  Basically the form should not submit until 3 checks are performed (check email address entered, check email address is correct format and check DOB is valid).  For some reason although it's triggering one or all of the validation checks, as at least one of the red text error messages pop up on clicking submit, it still pushes it onto the PHP page stated in the action of the form immediately after that error messages becomes visible.</p>
  
  <p>I know I could probably reinvent this in a different JavaScript way (my skills here are basic!) but I've had success with a more complex registration form in this same type of way.  Please could someone let me know what action is ignoring the JavaScript and essentially returning "true"?  Full page source follows.</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 validateEmail(str) {
    var re = /^(([^&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,}))$/;
    return re.test(str.toLowerCase());
  }
  
  function checkForm(form) {
    if (form.email.value == "") {
      var emailerror1 = "&lt;br&gt;&lt;i class='fa fa-exclamation-triangle'&gt;&lt;/i&gt; Please enter an email address&lt;br&gt;";
    } else {
      var emailerror1 = "";
      var test1 = 1;
    }
    document.getElementById("error1").innerHTML = emailerror1;
  
    if (form.email.value != "" &amp;&amp; !validateEmail(form.email.value)) {
      var emailerror2 = "&lt;br&gt;&lt;i class='fa fa-exclamation-triangle'&gt;&lt;/i&gt; Please check the format of your email address&lt;br&gt;";
    } else {
      var emailerror2 = "";
      var test2 = 1;
    }
    document.getElementById("error2").innerHTML = emailerror2;
  
    if (form.day.value == "" || form.month.value == "" || form.year.value == "") {
      var doberror = "&lt;br&gt;&lt;i class='fa fa-exclamation-triangle'&gt;&lt;/i&gt; Please enter your date of birth&lt;br&gt;&lt;br&gt;";
    } else if (form.day.value == "30" &amp;&amp; form.month.value == "02") {
      var doberror = "&lt;br&gt;&lt;i class='fa fa-exclamation-triangle'&gt;&lt;/i&gt; Please check your date of birth&lt;br&gt;&lt;br&gt;";
    } else if (form.day.value == "31" &amp;&amp; form.month.value == "02") {
      var doberror = "&lt;br&gt;&lt;i class='fa fa-exclamation-triangle'&gt;&lt;/i&gt; Please check your date of birth&lt;br&gt;&lt;br&gt;";
    } else if (form.day.value == "31" &amp;&amp; form.month.value == "04") {
      var doberror = "&lt;br&gt;&lt;i class='fa fa-exclamation-triangle'&gt;&lt;/i&gt; Please check your date of birth&lt;br&gt;&lt;br&gt;";
    } else if (form.day.value == "31" &amp;&amp; form.month.value == "06") {
      var doberror = "&lt;br&gt;&lt;i class='fa fa-exclamation-triangle'&gt;&lt;/i&gt; Please check your date of birth&lt;br&gt;&lt;br&gt;";
    } else if (form.day.value == "31" &amp;&amp; form.month.value == "09") {
      var doberror = "&lt;br&gt;&lt;i class='fa fa-exclamation-triangle'&gt;&lt;/i&gt; Please check your date of birth&lt;br&gt;&lt;br&gt;";
    } else if (form.day.value == "31" &amp;&amp; form.month.value == "11") {
      var doberror = "&lt;br&gt;&lt;i class='fa fa-exclamation-triangle'&gt;&lt;/i&gt; Please check your date of birth&lt;br&gt;&lt;br&gt;";
    } else {
      var doberror = "";
      var test3 = 1;
    }
    
    document.getElementById("error3").innerHTML = doberror;
  
    if (test1 === 1 &amp;&amp; test2 === 1 &amp;&amp; test3 === 1) {
      return true;
    } else {
      return false;
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;script src="https://kit.fontawesome.com/8486c5a1d8.js"&gt;&lt;/script&gt;
  &lt;div class="top_bar"&gt;
    &lt;div class="navbar"&gt;
      &lt;ul class="nav"&gt;
        &lt;li&gt;
          &lt;a href="/" style="padding: 0px;"&gt;&lt;img src="/images/logo.jpg" width="275" height="50"&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;form class="search" action="action_page.php"&gt;
            &lt;input type="text" placeholder="Search..." name="search"&gt;
            &lt;button type="submit"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/form&gt;
        &lt;/li&gt;
        &lt;li style="float:right"&gt;&lt;a href="/terms.php"&gt;Terms &amp; Conditions&lt;/a&gt;&lt;/li&gt;
        &lt;li style="float:right"&gt;&lt;a href="/privacy.php"&gt;Privacy policy&lt;/a&gt;&lt;/li&gt;
        &lt;li style="float:right"&gt;&lt;a href="/login.php"&gt;Log in&lt;/a&gt;&lt;/li&gt;
        &lt;li style="float:right"&gt;&lt;a href="/register.php"&gt;Register&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
    // Get the modal
    var modal = document.getElementById("myModal");
  
    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");
  
    // Get the &lt;span&gt; element that closes the modal
    var span = document.getElementsByClassName("close")[0];
  
    // When the user clicks the button, open the modal 
    btn.onclick = function() {
      modal.style.display = "block";
    }
  
    // When the user clicks on &lt;span&gt; (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }
  
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
  &lt;/script&gt;
  
  &lt;body&gt;
    &lt;div class="main_body"&gt;
      &lt;div class="content_top_margin"&gt;
  
        &lt;form id="forgot" method="post" class="standard" action="/forgot_action.php" onsubmit="return checkForm(this)"&gt;
          &lt;fieldset style="background-color: rgb(255, 255, 255); height:300px;"&gt;
            &lt;legend&gt;Forgotten username / password&lt;/legend&gt;
            &lt;table class="standard"&gt;
              &lt;tr class="standard"&gt;
                &lt;td class="standard"&gt;Please enter your email address and date of birth. We will reset your password and send it in an email along with your username.&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="standard"&gt;
                &lt;td class="standard"&gt;&lt;input style="margin-bottom:4px" placeholder="Email" name="email" type="text"&gt;&lt;span id="error1" style="position: relative; color: red; font-size: 14px;"&gt;&lt;/span&gt;&lt;span id="error2" style="position: relative; color: red; font-size: 14px;"&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="standard"&gt;
                &lt;td class="standard"&gt;
                  &lt;select required name="day" style="margin-right:8px"&gt;
                    &lt;option value="" disabled selected hidden&gt;Date of birth - day&lt;/option&gt;
                    &lt;option value="01"&gt;1st&lt;/option&gt;
                    &lt;option value="02"&gt;2nd&lt;/option&gt;
                    &lt;option value="03"&gt;3rd&lt;/option&gt;
                    &lt;option value="04"&gt;4th&lt;/option&gt;
                    &lt;option value="05"&gt;5th&lt;/option&gt;
                    &lt;option value="06"&gt;6th&lt;/option&gt;
                    &lt;option value="07"&gt;7th&lt;/option&gt;
                    &lt;option value="08"&gt;8th&lt;/option&gt;
                    &lt;option value="09"&gt;9th&lt;/option&gt;
                    &lt;option value="10"&gt;10th&lt;/option&gt;
                    &lt;option value="11"&gt;11th&lt;/option&gt;
                    &lt;option value="12"&gt;12th&lt;/option&gt;
                    &lt;option value="13"&gt;13th&lt;/option&gt;
                    &lt;option value="14"&gt;14th&lt;/option&gt;
                    &lt;option value="15"&gt;15th&lt;/option&gt;
                    &lt;option value="16"&gt;16th&lt;/option&gt;
                    &lt;option value="17"&gt;17th&lt;/option&gt;
                    &lt;option value="18"&gt;18th&lt;/option&gt;
                    &lt;option value="19"&gt;19th&lt;/option&gt;
                    &lt;option value="20"&gt;20th&lt;/option&gt;
                    &lt;option value="21"&gt;21st&lt;/option&gt;
                    &lt;option value="22"&gt;22nd&lt;/option&gt;
                    &lt;option value="23"&gt;23rd&lt;/option&gt;
                    &lt;option value="24"&gt;24th&lt;/option&gt;
                    &lt;option value="25"&gt;25th&lt;/option&gt;
                    &lt;option value="26"&gt;26th&lt;/option&gt;
                    &lt;option value="27"&gt;27th&lt;/option&gt;
                    &lt;option value="28"&gt;28th&lt;/option&gt;
                    &lt;option value="29"&gt;29th&lt;/option&gt;
                    &lt;option value="30"&gt;30th&lt;/option&gt;
                    &lt;option value="31"&gt;31st&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;select required name="month" style="margin-right:8px"&gt;
                    &lt;option value="" disabled selected hidden&gt;Date of birth - month&lt;/option&gt;
                    &lt;option value="01"&gt;January&lt;/option&gt;
                    &lt;option value="02"&gt;February&lt;/option&gt;
                    &lt;option value="03"&gt;March&lt;/option&gt;
                    &lt;option value="04"&gt;April&lt;/option&gt;
                    &lt;option value="05"&gt;May&lt;/option&gt;
                    &lt;option value="06"&gt;June&lt;/option&gt;
                    &lt;option value="07"&gt;July&lt;/option&gt;
                    &lt;option value="08"&gt;August&lt;/option&gt;
                    &lt;option value="09"&gt;September&lt;/option&gt;
                    &lt;option value="10"&gt;October&lt;/option&gt;
                    &lt;option value="11"&gt;November&lt;/option&gt;
                    &lt;option value="12"&gt;December&lt;/option&gt;
                  &lt;/select&gt;
                  &lt;select required name="year"&gt;
                    &lt;option value="" disabled selected hidden&gt;Date of birth - year&lt;/option&gt;
                    &lt;option value="1930"&gt;1930&lt;/option&gt;
                    &lt;option value="1931"&gt;1931&lt;/option&gt;
                    &lt;option value="1932"&gt;1932&lt;/option&gt;
                    &lt;option value="1933"&gt;1933&lt;/option&gt;
                    &lt;option value="1934"&gt;1934&lt;/option&gt;
                    &lt;option value="1935"&gt;1935&lt;/option&gt;
                    &lt;option value="1936"&gt;1936&lt;/option&gt;
                    &lt;option value="1937"&gt;1937&lt;/option&gt;
                    &lt;option value="1938"&gt;1938&lt;/option&gt;
                    &lt;option value="1939"&gt;1939&lt;/option&gt;
                    &lt;option value="1940"&gt;1940&lt;/option&gt;
                    &lt;option value="1941"&gt;1941&lt;/option&gt;
                    &lt;option value="1942"&gt;1942&lt;/option&gt;
                    &lt;option value="1943"&gt;1943&lt;/option&gt;
                    &lt;option value="1944"&gt;1944&lt;/option&gt;
                    &lt;option value="1945"&gt;1945&lt;/option&gt;
                    &lt;option value="1946"&gt;1946&lt;/option&gt;
                    &lt;option value="1947"&gt;1947&lt;/option&gt;
                    &lt;option value="1948"&gt;1948&lt;/option&gt;
                    &lt;option value="1949"&gt;1949&lt;/option&gt;
                    &lt;option value="1950"&gt;1950&lt;/option&gt;
                    &lt;option value="1951"&gt;1951&lt;/option&gt;
                    &lt;option value="1952"&gt;1952&lt;/option&gt;
                    &lt;option value="1953"&gt;1953&lt;/option&gt;
                    &lt;option value="1954"&gt;1954&lt;/option&gt;
                    &lt;option value="1955"&gt;1955&lt;/option&gt;
                    &lt;option value="1956"&gt;1956&lt;/option&gt;
                    &lt;option value="1957"&gt;1957&lt;/option&gt;
                    &lt;option value="1958"&gt;1958&lt;/option&gt;
                    &lt;option value="1959"&gt;1959&lt;/option&gt;
                    &lt;option value="1960"&gt;1960&lt;/option&gt;
                    &lt;option value="1961"&gt;1961&lt;/option&gt;
                    &lt;option value="1962"&gt;1962&lt;/option&gt;
                    &lt;option value="1963"&gt;1963&lt;/option&gt;
                    &lt;option value="1964"&gt;1964&lt;/option&gt;
                    &lt;option value="1965"&gt;1965&lt;/option&gt;
                    &lt;option value="1966"&gt;1966&lt;/option&gt;
                    &lt;option value="1967"&gt;1967&lt;/option&gt;
                    &lt;option value="1968"&gt;1968&lt;/option&gt;
                    &lt;option value="1969"&gt;1969&lt;/option&gt;
                    &lt;option value="1970"&gt;1970&lt;/option&gt;
                    &lt;option value="1971"&gt;1971&lt;/option&gt;
                    &lt;option value="1972"&gt;1972&lt;/option&gt;
                    &lt;option value="1973"&gt;1973&lt;/option&gt;
                    &lt;option value="1974"&gt;1974&lt;/option&gt;
                    &lt;option value="1975"&gt;1975&lt;/option&gt;
                    &lt;option value="1976"&gt;1976&lt;/option&gt;
                    &lt;option value="1977"&gt;1977&lt;/option&gt;
                    &lt;option value="1978"&gt;1978&lt;/option&gt;
                    &lt;option value="1979"&gt;1979&lt;/option&gt;
                    &lt;option value="1980"&gt;1980&lt;/option&gt;
                    &lt;option value="1981"&gt;1981&lt;/option&gt;
                    &lt;option value="1982"&gt;1982&lt;/option&gt;
                    &lt;option value="1983"&gt;1983&lt;/option&gt;
                    &lt;option value="1984"&gt;1984&lt;/option&gt;
                    &lt;option value="1985"&gt;1985&lt;/option&gt;
                    &lt;option value="1986"&gt;1986&lt;/option&gt;
                    &lt;option value="1987"&gt;1987&lt;/option&gt;
                    &lt;option value="1988"&gt;1988&lt;/option&gt;
                    &lt;option value="1989"&gt;1989&lt;/option&gt;
                    &lt;option value="1990"&gt;1990&lt;/option&gt;
                    &lt;option value="1991"&gt;1991&lt;/option&gt;
                    &lt;option value="1992"&gt;1992&lt;/option&gt;
                    &lt;option value="1993"&gt;1993&lt;/option&gt;
                    &lt;option value="1994"&gt;1994&lt;/option&gt;
                    &lt;option value="1995"&gt;1995&lt;/option&gt;
                    &lt;option value="1996"&gt;1996&lt;/option&gt;
                    &lt;option value="1997"&gt;1997&lt;/option&gt;
                    &lt;option value="1998"&gt;1998&lt;/option&gt;
                    &lt;option value="1999"&gt;1999&lt;/option&gt;
                    &lt;option value="2000"&gt;2000&lt;/option&gt;
                    &lt;option value="2001"&gt;2001&lt;/option&gt;
                    &lt;option value="2002"&gt;2002&lt;/option&gt;
                    &lt;option value="2003"&gt;2003&lt;/option&gt;
                    &lt;option value="2004"&gt;2004&lt;/option&gt;
                    &lt;option value="2005"&gt;2005&lt;/option&gt;
                    &lt;option value="2006"&gt;2006&lt;/option&gt;
                    &lt;option value="2007"&gt;2007&lt;/option&gt;
                    &lt;option value="2008"&gt;2008&lt;/option&gt;
                    &lt;option value="2009"&gt;2009&lt;/option&gt;
                    &lt;option value="2010"&gt;2010&lt;/option&gt;
                    &lt;option value="2011"&gt;2011&lt;/option&gt;
                    &lt;option value="2012"&gt;2012&lt;/option&gt;
                    &lt;option value="2013"&gt;2013&lt;/option&gt;
                    &lt;option value="2014"&gt;2014&lt;/option&gt;
                    &lt;option value="2015"&gt;2015&lt;/option&gt;
                    &lt;option value="2016"&gt;2016&lt;/option&gt;
                    &lt;option value="2017"&gt;2017&lt;/option&gt;
                    &lt;option value="2018"&gt;2018&lt;/option&gt;
                    &lt;option value="2019"&gt;2019&lt;/option&gt;
                    &lt;option value="2020"&gt;2020&lt;/option&gt;
                    &lt;span id="error3" style="position: relative; color: red; font-size: 14px;"&gt;&lt;/span&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="standard"&gt;
                &lt;td class="standard"&gt;&lt;input class="submit" style='font-size: 20px; color: rgb(100, 100, 100); margin-top: 8px;' type="submit" value="Send me my username and password" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
          &lt;/fieldset&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>