Question

我正在为表单添加验证。电子邮件和单选按钮的错误消息可以正常工作，但是如果您不选中单选按钮并尝试提交表单，则电子邮件字段将消失。有人可以帮我解决这个问题吗？

我不认为我的CSS与它有任何关系，因为直到为单选按钮添加错误消息之后，这个问题才出现。

function validateForm() { //creates function for validation
  var email = document.forms["emailForm"]["email"].value; //calls form to be validated
  if (email == "") { //if email is left blank

    document.getElementById('emailerr').style.visibility = "visible"; //make error message visible
    document.getElementById('emailerr').innerHTML = "*Valid email address required"; //error message
    return false; //does not submit form
  } else {
    document.getElementById('email').style.visibility = "hidden"; //hides error message
  }

  if (document.emailForm.age.checked == false) { //if you haven't verified you're 18+

    document.getElementById('18err').style.visibility = "visible"; //make error message visible
    document.getElementById('18err').innerHTML = "*Please verify you are over 18"; //error message
    return false; //does not submit form
  } else {
    document.getElementById('18err').style.visibility = "hidden";
  }

}

<form name="emailForm" onsubmit="return validateForm()">
  <input type="email" id="email" placeholder="Email">
  <div id="emailerr"></div>

  <label for="update">
						<input type="checkbox" value="update" id="update">
						I want coupons<br>
					</label>

  <label for="new">
						<input type="checkbox" value="new" id="new">
						I want updates on new plants<br>
					</label>

  <label for="update">
						<input type="checkbox" value="update" id="update">
						Include me on other plant info<br>
					</label>

  <label for="age" id="verify">
						<input type="radio" id="age">
						I verify I am 18 years or older.
					</label>
  <div id="18err"></div>

  <input type="submit">
</form>

Answer 1

问题是validateForm()方法中第一个if条件的else部分。在其他部分-如果电子邮件字段不为空，则将#email的可见性设置为隐藏，而应将#emailerr的可见性设置为隐藏。

请尝试将getElementByID中的值从email更改为emailerr。我已在以下代码段中进行了必要的更改。希望这会有所帮助！

function validateForm() { //creates function for validation
  var email = document.forms["emailForm"]["email"].value; //calls form to be validated
  if (email == "") { //if email is left blank

    document.getElementById('emailerr').style.visibility = "visible"; //make error message visible
    document.getElementById('emailerr').innerHTML = "*Valid email address required"; //error message
    return false; //does not submit form
  } else {
    document.getElementById('emailerr').style.visibility = "hidden"; //hides error message
  }

  if (document.emailForm.age.checked == false) { //if you haven't verified you're 18+

    document.getElementById('18err').style.visibility = "visible"; //make error message visible
    document.getElementById('18err').innerHTML = "*Please verify you are over 18"; //error message
    return false; //does not submit form
  } else {
    document.getElementById('18err').style.visibility = "hidden";
  }

}

<form name="emailForm" onsubmit="return validateForm()">
  <input type="email" id="email" placeholder="Email">
  <div id="emailerr"></div>

  <label for="update">
						<input type="checkbox" value="update" id="update">
						I want coupons<br>
					</label>

  <label for="new">
						<input type="checkbox" value="new" id="new">
						I want updates on new plants<br>
					</label>

  <label for="update">
						<input type="checkbox" value="update" id="update">
						Include me on other plant info<br>
					</label>

  <label for="age" id="verify">
						<input type="radio" id="age">
						I verify I am 18 years or older.
					</label>
  <div id="18err"></div>

  <input type="submit">
</form>

Answer 2

function validateForm() { //creates function for validation
  var email = document.forms["emailForm"]["email"].value; //calls form to be validated
  if (email == "") { //if email is left blank

    document.getElementById('emailerr').style.visibility = "visible"; //make error message visible
    document.getElementById('emailerr').innerHTML = "*Valid email address required"; //error message
    return false; //does not submit form
  } else {
    document.getElementById('emailerr').style.visibility = "hidden"; //hides error message
  }

  if (document.emailForm.age.checked == false) { //if you haven't verified you're 18+

    document.getElementById('18err').style.visibility = "visible"; //make error message visible
    document.getElementById('18err').innerHTML = "*Please verify you are over 18"; //error message
    return false; //does not submit form
  } else {
    document.getElementById('18err').style.visibility = "hidden";
  }

}

   <form name="emailForm" onsubmit="return validateForm()">
   <input type="email" id="email" placeholder="Email">
   <div id="emailerr"></div>
   <label for="update">
   <input type="checkbox" value="update" id="update">
   I want coupons<br>
   </label>
   <label for="new">
   <input type="checkbox" value="new" id="new">
   I want updates on new plants<br>
   </label>
   <label for="update">
   <input type="checkbox" value="update" id="update">
   Include me on other plant info<br>
   </label>
   <label for="age" id="verify">
   <input type="radio" id="age">
   I verify I am 18 years or older.
   </label>
   <div id="18err"></div>
   <input type="submit">
</form>

Answer 3

在代码的其他部分（电子邮件验证是否为空）中，您隐藏了电子邮件输入，请将其更改为电子邮件错误ID，以便一切正常。希望对您有帮助

您的代码：document.getElementById('email').style.visibility = "hidden";

修改后的代码：document.getElementById('emailerr').style.visibility = "hidden";

取消选中单选按钮时，电子邮件字段消失

3 个答案: