时间戳

首页 > 解决方案 > 如何仅使用 JavaScript 为两个以上的输入字段准确显示表单验证错误消息？

javascript - 如何仅使用 JavaScript 为两个以上的输入字段准确显示表单验证错误消息？

问题描述

我创建了一个 JavaScript 函数，该函数在提交输入期间检查表单，如果没有输入则显示错误消息。

当没有输入时它工作得很好。它正确显示所有错误消息。

问题：但是如果我只将第一个字段留空，即fullname; if 循环在那里停止并且不显示第二个或第三个错误消息，即streetaddr& quantity。

注意：此错误仅在第一个字段（streetaddr即.quantityfullname

我应该怎么做才能正确显示错误消息。根据空白输入，无论输入字段是第一个还是第二个或第三个。

另外，我更喜欢只使用 Vanilla JavaScript，没有框架/库。我正在尝试学习！

链接：这是来自 Wikiversity 的挑战

/* 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>

标签： javascripthtmlfunctionvalidationif-statement

解决方案

我宁愿只制作 fields 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>

推荐阅读