Проверка формы HTML в сочетании с XMLRequest, проверка не работает - PullRequest
0 голосов
/ 01 марта 2019

Итак, у меня есть HTML-форма с определенной проверкой тегов.Все работало нормально, пока я не установил JS для отправки данных формы, теперь проверка не работает.

<form>
  <input id = "username" oninput = "inputFunction(this.id)" class = "inputField" type = "text" placeholder = "Username:" name = "username" minlength = "8" required><p id = "usernameAlreadyTaken"></p>
  <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>
  <input id = "psw2" oninput = "inputSecondPassword(this.id)" type  = "password" class = "inputField" placeholder = "Retype Password:" name = "psw"><p id = "check"></p>
  <input id = "fullname" oninput = "inputFunction(this.id)" type class = "inputField" = "text" placeholder = "Full Name:" name = "fullname" required>
  <input id = "email" oninput = "inputFunction(this.id)" type class = "inputField" = "email" placeholder = "Email Address:" name = "email" required>
  <input onclick = "registrationSendFunction()" id = "formRegisterSubmit" type = "button" value = "Create Account"  class = "registerSendButton">
</form>

Итак, все это работало, как планировалось, т.е. с обязательными полями и паролем в правильном формате и т. Д. Затем, когда я добавил следующее, он перестал работать правильно.

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 && xhr.status === 200) {
        regModal.style.display = "none";
        }
      }
}

Любая помощь отличная, спасибо.

...