title: HTML form validation in conjunction with XMLRequest, validation not working
body: <p>So I have a HTML form with some validation in place on the tags. It was working all okay until I put in place some JS to send form data, now the validation doesn't function. </p>
  
  <pre><code>&lt;form&gt;
    &lt;input id = "username" oninput = "inputFunction(this.id)" class = "inputField" type = "text" placeholder = "Username:" name = "username" minlength = "8" required&gt;&lt;p id = "usernameAlreadyTaken"&gt;&lt;/p&gt;
    &lt;input id = "psw" oninput = "inputFirstPassword(this.id)" type  = "password" class = "inputField" placeholder = "Password:" name = "psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required&gt;
    &lt;input id = "psw2" oninput = "inputSecondPassword(this.id)" type  = "password" class = "inputField" placeholder = "Retype Password:" name = "psw"&gt;&lt;p id = "check"&gt;&lt;/p&gt;
    &lt;input id = "fullname" oninput = "inputFunction(this.id)" type class = "inputField" = "text" placeholder = "Full Name:" name = "fullname" required&gt;
    &lt;input id = "email" oninput = "inputFunction(this.id)" type class = "inputField" = "email" placeholder = "Email Address:" name = "email" required&gt;
    &lt;input onclick = "registrationSendFunction()" id = "formRegisterSubmit" type = "button" value = "Create Account"  class = "registerSendButton"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>So, this was all working as planned, <i>ie</i> with required fields and password being of the correct format etc. Then when I added the following, it stopped functioning correctly.</p>
  
  <pre><code>function registrationSendFunction() {
    const xhr = new XMLHttpRequest();
    const url = "/register";
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/json");
    let regVariable1 = document.getElementById("username").value;
    let regVariable2 = document.getElementById("psw2").value;
    let regVariable3 = document.getElementById("fullname").value;
    let regVariable4 = document.getElementById("email").value;
    let regVariable5 = document.getElementById("nationality").value;    
    let regVariable6 = document.getElementById("favourite").value;
    let registrationDetails = {
      "username" : regVariable1,
      "secret" : regVariable2,
      "fullname" : regVariable3,
      "emailAddress" : regVariable4,
      "nationality" : regVariable5,
      "favourite" : regVariable6
    }
    let dataToSend = JSON.stringify(registrationDetails)
    xhr.send(dataToSend);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
          regModal.style.display = "none";
          }
        }
  }
  </code></pre>
  
  <p>Any help is great, thanks.</p>