Как точно отображать сообщения об ошибках проверки формы для более чем двух полей ввода, используя только JavaScript?

Question

Я создал функцию JavaScript, которая проверяет форму во время отправки ввода и отображает сообщение об ошибке, если ввода нет.

Она отлично работает, когда ввод не задан. Он правильно отображает все сообщения об ошибках.

Проблема: Но если я оставлю только первое поле пустым, то есть fullname; if l oop останавливается на этом и не отображает второе или третье сообщение об ошибке, то есть streetaddr & quantity.

ПРИМЕЧАНИЕ. Эта ошибка возникает только в том случае, если одно из streetaddr или quantity не указано с добавлением к первому полю, например, fullname.

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

Кроме того, я предпочитаю делать это только с Vanilla JavaScript, без фреймворков / библиотек. Я пытаюсь учиться!

Ссылка (и): Это вызов от Викиверситета

/* Checking form function */
function checkForm(){
	window.alert("You clicked Submit!");
	var fullNameCheck = document.getElementById("fullname");
	var addressCheck = document.getElementById("streetaddr");
	var quantityCheck = document.getElementById("quantity");
	var is_valid = false;
	/* If statements to check if text box is empty */
	if (fullNameCheck.value=="" && addressCheck.value=="" && quantityCheck.value=="") {
		document.getElementById("nameerrormsg").style.display="inline";
		document.getElementById("addrerrormsg").style.display="inline";
		document.getElementById("qtyerrormsg").style.display="inline";
		is_valid = false;
	} else if(fullNameCheck.value==""){
		document.getElementById("nameerrormsg").style.display="inline";
		document.getElementById("addrerrormsg").style.display="none";
		document.getElementById("qtyerrormsg").style.display="none";
		is_valid = false;
	} else if (addressCheck.value==""){
		document.getElementById("addrerrormsg").style.display="inline";
		document.getElementById("nameerrormsg").style.display="none";
		document.getElementById("qtyerrormsg").style.display="none";
		is_valid = false;
	} else if (quantityCheck.value==""){
		document.getElementById("qtyerrormsg").style.display="inline";
		document.getElementById("nameerrormsg").style.display="none";
		document.getElementById("addrerrormsg").style.display="none";
		is_valid = false;
	} else {
		document.getElementById("nameerrormsg").style.display="none";
		document.getElementById("addrerrormsg").style.display="none";
		document.getElementById("qtyerrormsg").style.display="none";
		is_valid = true;

	} return is_valid;
}

	

.errormsg{
	color: red;
	background-color: yellow;
	display: none;
}

<form action="mailto:me@fakeemail.com" onsubmit="return checkForm();">
    <fieldset>

      <legend>Personal details</legend>
      <p>
        <label>
          Full name:
          <input type="text" name="fullname" id="fullname">
        </label>
      </p>
      <p class="errormsg" id="nameerrormsg">Please enter your name above</p>

      <p>
        <label>
          Street Address:
          <input type="text" name="streetaddr" id="streetaddr">
        </label>
      </p>
      <p class="errormsg" id="addrerrormsg">Please enter your street address</p>

      <!-- Quantity input -->
      <p>
        <label>
          Quantity:
          <input type="text" name="quantity" id="quantity">
        </label>
      </p>
      <p class="errormsg" id="qtyerrormsg">Please enter your quantity</p>

    </fieldset>
    <input type="submit" value="Submit it!"> 
  </form>

Answer 1

Я бы предпочел просто сделать поля required, Javascript не требуется:

<form action="mailto:me@fakeemail.com" onsubmit="return checkForm();">
  <fieldset>

    <legend>Personal details</legend>
    <p>
      <label>
          Full name:
          <input type="text" name="fullname" id="fullname" required>
        </label>
    </p>

    <p>
      <label>
          Street Address:
          <input type="text" name="streetaddr" id="streetaddr" required>
        </label>
    </p>

    <!-- Quantity input -->
    <p>
      <label>
          Quantity:
          <input type="text" name="quantity" id="quantity" required>
        </label>
    </p>

  </fieldset>
  <input type="submit" value="Submit it!">
</form>

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

Также было бы неплохо полностью избегать встроенных обработчиков , у них слишком много проблем, чтобы их стоило использовать. Правильно прикрепите слушателей, используя вместо этого addEventListener в Javascript.

document.querySelector('form').addEventListener('submit', () => {
  for (const errormsg of document.querySelectorAll('.errormsg')) {
    errormsg.style.display = 'none';
  }
  let valid = true;
  for (const input of document.querySelectorAll('form input')) {
    if (input.value) {
      // valid
      continue;
    }
    valid = false;
    input.closest('p').nextElementSibling.style.display = 'inline';
  }
  return valid;
});

.errormsg{
	color: red;
	background-color: yellow;
	display: none;
}

<form action="mailto:me@fakeemail.com">
    <fieldset>

      <legend>Personal details</legend>
      <p>
        <label>
          Full name:
          <input type="text" name="fullname" id="fullname">
        </label>
      </p>
      <p class="errormsg" id="nameerrormsg">Please enter your name above</p>

      <p>
        <label>
          Street Address:
          <input type="text" name="streetaddr" id="streetaddr">
        </label>
      </p>
      <p class="errormsg" id="addrerrormsg">Please enter your street address</p>

      <!-- Quantity input -->
      <p>
        <label>
          Quantity:
          <input type="text" name="quantity" id="quantity">
        </label>
      </p>
      <p class="errormsg" id="qtyerrormsg">Please enter your quantity</p>

    </fieldset>
    <input type="submit" value="Submit it!"> 
  </form>

Answer 2

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

/* Checking form function */
function checkForm() {
  window.alert("You clicked Submit!");
  var fullNameCheck = document.getElementById("fullname");
  var addressCheck = document.getElementById("streetaddr");
  var quantityCheck = document.getElementById("quantity");
  var is_valid = false;
  /* If statements to check if text box is empty */
  document.getElementById("nameerrormsg").style.display = "none";
  document.getElementById("addrerrormsg").style.display = "none";
  document.getElementById("qtyerrormsg").style.display = "none";
  is_valid = true;

  if (fullNameCheck.value == "") {
    document.getElementById("nameerrormsg").style.display = "inline";
    is_valid = false;
  }
  if (addressCheck.value == "") {
    document.getElementById("addrerrormsg").style.display = "inline";
    is_valid = false;
  }
  if (quantityCheck.value == "") {
    document.getElementById("qtyerrormsg").style.display = "inline";
    is_valid = false;
  }
  return is_valid;
}

.errormsg {
  color: red;
  background-color: yellow;
  display: none;
}

<form action="mailto:me@fakeemail.com" onsubmit="return checkForm();">
  <fieldset>

    <legend>Personal details</legend>
    <p>
      <label>
          Full name:
          <input type="text" name="fullname" id="fullname">
        </label>
    </p>
    <p class="errormsg" id="nameerrormsg">Please enter your name above</p>

    <p>
      <label>
          Street Address:
          <input type="text" name="streetaddr" id="streetaddr">
        </label>
    </p>
    <p class="errormsg" id="addrerrormsg">Please enter your street address</p>

    <!-- Quantity input -->
    <p>
      <label>
          Quantity:
          <input type="text" name="quantity" id="quantity">
        </label>
    </p>
    <p class="errormsg" id="qtyerrormsg">Please enter your quantity</p>

  </fieldset>
  <input type="submit" value="Submit it!">
</form>