JS Форма события и проверка

Question

Я надеюсь, что кто-нибудь может помочь мне найти ошибку в этом коде, мне нужно использовать простой js, чтобы создать форму, которая отправляется только в случае отсутствия ошибок. Имя пользователя должно быть действительным адресом электронной почты. Пароль и повторный ввод пароля должны состоять из 8 символов и состоять из одной заглавной, одной строчной и одной цифры c. Пароль и повторно введенный пароль должны совпадать. Мне нужно использовать регулярное выражение для ограничения пароля. Если правила данных нарушаются, должны отображаться соответствующие сообщения об ошибках и форма должна быть запрещена для отправки. Может ли кто-нибудь помочь мне с тем, почему он не выполняет то, что должен? Я все еще новичок в js, и любой помощник будет признателен.

function handleInvalidities(input) {
  let errMsg = " ";
  if (!input.validity.paternMismatch) {
    errMsg = "Invalid entry. Enter your details in the format shown.";
  }
  if (!input.validity.paternMismatch) {
    errMsg = "Invalid entry. This field cannot be empty. Please enter a value.";
  }
  return errMsg;
}

function displayInvalidities(errMsg, elem) {
  let elemPos = document.getElementById(elem);
  let errElem = document.createElement("span");
  errElem.setAttribute("class", "error");
  let errText = document.createTextNode(errMsg);
  errElem.appendChild(errText);
  elemPos.parentNode.insertBefore(errElem, elemPos.nextSibling);
}

function cleanUpErrors() {
  let errors = document.getElementsByClassName("error");
  for (let i = 0; i < errors.length; i++) {
    errors[i].style.display = "none";

  }

}

window.onload = () => {
  let theForm = document.getElementById("loginform");
  theForm.addEventListener("submit");
  (event) => {
    let stopSubmit = false;
    cleanedUpErrors();
    for (let i = 0; i < theForm.elements.length; i++) {
      if (!theForm.elements[i].checkValidity()) {
        displayInvalidities(handleInvalidities(theForm.elements[i]), theForm.Elements[i].id);
        stopSubmit = true;
      }
    }
    if (stopSubmit) {
      event.preventDefault();
    }
  }, (false);

}

<section>
  <h1>Form: validated using Javascript</h1>
  <p>Try entering the following:</p>
  <ul>
    <li>Password longer or shorter than 8 characters and/or without an uppercase, lowercase or a numeric.</li>
    <li>Passwords that do not match</li>
  </ul>
  <h2>Register</h2>
  <p>* = Required Field</p>
  <div id="formcontainer">
    <form id="regsiterdetails" action="fma_t3confirm.html">
      <div>
        <label for="username">* Userame:</label>
        <input type="text" id="username">
      </div>
      <div>
        <label for="password">* Password (Must be 8 characters and include one uppercase, one lowercase and one numeric):</label>
        <input type="password" id="password">
        <input type="checkbox" id="showpasswords">
        <label id="showpasswordslabel" for="showpasswords">Show passwords</label>
      </div>
      <div>
        <label for="retypedpassword">* Retype your password:</label>
        <input type="password" id="retypedpassword">
        <span id="passwordmatcherror"></span>
      </div>
      <div>
        <button type="submit" id="registerButton">Register</button>
      </div>
    </form>
  </div>
</section>

Answer 1

Вам нужно исправить свои обработчики событий, орфографию (элементы) и идентификатор формы (registerdetails), а также написание имен функций, таких как cleanUpErrors

window.addEventListener("load", () => {
  document.getElementById("registerdetails").addEventListener("submit", event => {
    const theForm = event.target;
    let stopSubmit = false;
    cleanUpErrors();
    for (let i = 0; i < theForm.elements.length; i++) {
      if (!theForm.elements[i].checkValidity()) {
        displayInvalidities(handleInvalidities(theForm.elements[i]), theForm.elements[i].id);
        stopSubmit = true;
      }
    }
    if (stopSubmit) {
      event.preventDefault();
    }
  })
})

Answer 2

Вы настраиваете прослушиватель событий без какой-либо функции. Измените свой код следующим образом:

window.onload = () => {
    let theForm = document.getElementById("regsiterdetails");
    theForm.addEventListener("submit",(event) => {
        let stopSubmit = false;
        cleanedUpErrors();
        for (let i = 0; i < theForm.elements.length; i++) {
            if (!theForm.elements[i].checkValidity()){
                displayInvalidities(handleInvalidities(theForm.elements[i]), theForm.Elements[i].id);
                stopSubmit = true;
            }                
        }
        if (stopSubmit) {
            event.preventDefault();
        }
    }, (false);
)

}

Также проверьте свой код, так как нет элемента с идентификатором loginform. Я думаю, что вы должны использовать regsiterdetails вместо loginform.

Answer 3

Не было элемента формы с идентификатором, который вы пытаетесь получить. Попытайтесь получить действительный идентификатор, равный regsiterdetails, и исправьте список параметров addEventListener.

function handleInvalidities(input) {
  let errMsg = " ";
  if (!input.validity.paternMismatch) {
    errMsg = "Invalid entry. Enter your details in the format shown.";
  }
  if (!input.validity.paternMismatch) {
    errMsg = "Invalid entry. This field cannot be empty. Please enter a value.";
  }
  return errMsg;
}

function displayInvalidities(errMsg, elem) {
  let elemPos = document.getElementById(elem);
  let errElem = document.createElement("span");
  errElem.setAttribute("class", "error");
  let errText = document.createTextNode(errMsg);
  errElem.appendChild(errText);
  elemPos.parentNode.insertBefore(errElem, elemPos.nextSibling);
}

function cleanUpErrors() {
  let errors = document.getElementsByClassName("error");
  for (let i = 0; i < errors.length; i++) {
    errors[i].style.display = "none";

  }

}

window.onload = () => {
  let theForm = document.getElementById("regsiterdetails");
  theForm.addEventListener("submit", (event) => {
    let stopSubmit = false;
    cleanedUpErrors();
    for (let i = 0; i < theForm.elements.length; i++) {
      if (!theForm.elements[i].checkValidity()) {
        displayInvalidities(handleInvalidities(theForm.elements[i]), theForm.Elements[i].id);
        stopSubmit = true;
      }
    }
    if (stopSubmit) {
      event.preventDefault();
    }
  }, (false));

}

<section>
  <h1>Form: validated using Javascript</h1>
  <p>Try entering the following:</p>
  <ul>
    <li>Password longer or shorter than 8 characters and/or without an uppercase, lowercase or a numeric.</li>
    <li>Passwords that do not match</li>
  </ul>
  <h2>Register</h2>
  <p>* = Required Field</p>
  <div id="formcontainer">
    <form id="regsiterdetails" action="fma_t3confirm.html">
      <div>
        <label for="username">* Userame:</label>
        <input type="text" id="username">
      </div>
      <div>
        <label for="password">* Password (Must be 8 characters and include one uppercase, one lowercase and one numeric):</label>
        <input type="password" id="password">
        <input type="checkbox" id="showpasswords">
        <label id="showpasswordslabel" for="showpasswords">Show passwords</label>
      </div>
      <div>
        <label for="retypedpassword">* Retype your password:</label>
        <input type="password" id="retypedpassword">
        <span id="passwordmatcherror"></span>
      </div>
      <div>
        <button type="submit" id="registerButton">Register</button>
      </div>
    </form>
  </div>
</section>