Пользовательские сообщения проверки формы JavaScript и минимальная длина поля

Question

Я пытаюсь использовать JavaScript для проверки ввода простой формы.Есть три поля:

• Имя - обязательное текстовое поле, не может быть пустым

• Email является обязательным полем электронной почты, которое должно быть от домена domain.com.au

• Почтовый индекс является обязательным числовым полем, которое должнобыть длиной 4 символа

Я также хотел бы, чтобы справа от полей отображались пользовательские сообщения об ошибках, а не появлялись системные всплывающие окна.

В данный моментПервые два поля проверены правильно, но пользовательские сообщения не отображаются.Поле почтового индекса не проверяется, за исключением того, что в нем должно быть хотя бы одно число.

JavaScript новичок здесь, пожалуйста, будьте добры.

function validation() {
  var emailPattern = new RegExp('\w.%+-]+@domain\.com\.au');

  if (document.getElementById("name").value.length == 0) {
    document.getElementById("nameAlert").innerHTML = "<em> Please enter name here</em>";
    return false;
  } else if (emailPattern.test(document.getElementById("email").value) = false) {
    document.getElementById("emailAlert").innerHTML = "<em> Your email must include @domain.com.au </em>";
    return false;
  } else if (document.getElementById("postcode").value.length != 4) {
    document.getElementById("postcodeAlert").innerHTML = "<em> Your postcode must be four characters long </em>";
    return false;
  } else return true;
}

<form method="POST" action="#" onsubmit="return validation();">
  <label for="name">Name</label>
  <input type="text" name="name" id="name"><span id="nameAlert"></span><br><br>
  <label for="email">Email</label>
  <input type="text" name="email" id="email" pattern="[\w.%+-]+@domain\.com\.au"><span id="emailAlert"></span><br><br>
  <label for="postcode">Postcode</label>
  <input type="text" name="postcode" id="postcode" pattern="^[0-9]{4}"><span id="postcodeAlert"></span><br><br>
  <button type="submit">Submit Query</button>
</form>

Answer 1

У вас есть оператор if и прочее. Поэтому, если первое условие истинно, другие проверяться не будут, поэтому отображается только одно сообщение.

Вот рабочий пример

function validation() {
  var emailPattern = new RegExp('\w.%+-]+@domain\.com\.au');
  var isOk = true;

  if (document.getElementById("name").value.length == 0) {
    document.getElementById("nameAlert").innerHTML = "<em> Please enter name here</em>";
    isOk = false;
  }

  if (emailPattern.test(document.getElementById("email").value) == false) {
    document.getElementById("emailAlert").innerHTML = "<em> Your email must include @domain.com.au </em>";
    isOk = false;
  }

  if (document.getElementById("postcode").value.length != 4) {
    document.getElementById("postcodeAlert").innerHTML = "<em> Your postcode must be four characters long </em>";
    isOk = false;
  }

  return isOk;
}

<form method="POST" action="#" onsubmit="return validation();">
  <label for="name">Name</label>
  <input type="text" name="name" id="name"><span id="nameAlert"></span><br><br>
  <label for="email">Email</label>
  <input type="text" name="email" id="email" pattern="[\w.%+-]+@domain\.com\.au"><span id="emailAlert"></span><br><br>
  <label for="postcode">Postcode</label>
  <input type="number" name="postcode" id="postcode" pattern="^[0-9]{4}"><span id="postcodeAlert"></span><br><br>
  <button type="submit">Submit Query</button>
</form>