Проверка формы HTML в сочетании с XMLRequest, проверка не работает

Итак, у меня есть 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";
        }
      }
}

Любая помощь велика, спасибо.

Куда звонить registrationSendFunction()? Или когда прилагается событие отправки формы?

Gary Thomas 01.03.2019 01:06

извиняюсь, это там - проблема с форматированием, которую я пропустил

Seamus.Reeve 01.03.2019 01:17

Если я не ошибаюсь, кнопка «Тип ввода» не вызывает проверку формы. Используйте тип отправки

Hemant Sakta 01.03.2019 02:24

отлично, спасибо! Я думал, что это будет что-то в этом роде, просто нужен был еще один платный взгляд

Seamus.Reeve 01.03.2019 03:05
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
28
0

Другие вопросы по теме