Question

我是Stack Overflow的新人，我也是编程的初学者，所以请怜悯:) 当一个或多个字段为空时，我试图用javascript阻止提交多字段表单。基本上，当我提交表单时，将所有字段留空，错误仅出现在第一个字段下方，但其他字段没有任何反应，并且表单已发送。我事先道歉，因为这个话题已经在其他主题中被多次处理，但我无法弄清楚如何在工作中。我使用以下代码（同一页面中的html和js）：

＆＃13;

<script type="text/javascript">
function validateForm() {
	var a = document.forms["form1"]["nome"].value;
    var b = document.forms["form1"]["cognome"].value;	
	var c = document.forms["form1"]["azienda"].value;	
	var d = document.forms["form1"]["CF"].value;	
	var e = document.forms["form1"]["msg"].value;	
	
	if (a == ""){
		document.getElementById('err_nome').innerHTML += "Il nome è obbligatorio";
		return false;}

	if (b == ""){
		document.getElementById('err_cognome').innerHTML += "Il cognome è obbligatorio";
		return false;}

	if (c == ""){
		document.getElementById('err_azienda').innerHTML += "Il azienda è obbligatorio";
		return false;}

	if (d == ""){
		document.getElementById('err_CF').innerHTML += "Il CF è obbligatorio";
		return false;}

	if (e == ""){
		document.getElementById('err_msg').innerHTML += "Il msg è obbligatorio";
		return false;}
}

</script>

＆＃13;

<html>

<body>
<?php include ("incl/header.php"); ?>

<div class="menu">
<?php include ("incl/menu.php") ?>
</div>

<div class="column-left">
</div>

<div class="column-center"><br>

<form name="form1" method="post" action="sendmail.php" onsubmit="validateForm()>
<br>

Nome
<input type="text" name="nome">*
<br><span class="error"><div id="err_nome"></div></span><br><br><br>

Cognome
<input type="text" name="cognome">*
<br><span class="error"><div id="err_cognome"></div></span><br><br><br>

Azienda
<input type="text" name="azienda">*
<br><span class="error"><div id="err_azienda"></div></span><br><br><br>

Codice Fiscale
<input type="text" name="CF">*
<br><span class="error"><div id="err_CF"></div></span><br><br><br>

Messaggio
<textarea id="text" name="msg" rows="5" col="40" maxlength="2000"></textarea>*
<br><span class="error"><div id="err_msg"></div></span><br>

<br>

<input type="submit" name="submit" value="submit">
<br><br><br><br><br><br>
</form>

</div>

<div class="column-right">
</div>

<div class="footer">
<?php include "incl/footer.php"; ?>
</div>

</body>
</html>

＆＃13;

非常感谢你们的帮助。阿尔贝托

Answer 1

您在所有比较中都有return false;，这将在第一个错误字段后退出validateForm()函数。如果要验证所有字段，请将结果保存在变量中并在结尾处返回。像这样：

＆＃13;

function validateForm() {
  var a = document.forms["form1"]["nome"].value;
  var b = document.forms["form1"]["cognome"].value;
  var c = document.forms["form1"]["azienda"].value;
  var d = document.forms["form1"]["CF"].value;
  var e = document.forms["form1"]["msg"].value;
  var result = true;

  if (a == "") {
    document.getElementById('err_nome').innerHTML += "Il nome è obbligatorio";
    result = result && false;
  }

  if (b == "") {
    document.getElementById('err_cognome').innerHTML += "Il cognome è obbligatorio";
    result = result && false;
  }

  if (c == "") {
    document.getElementById('err_azienda').innerHTML += "Il azienda è obbligatorio";
    result = result && false;
  }

  if (d == "") {
    document.getElementById('err_CF').innerHTML += "Il CF è obbligatorio";
    result = result && false;
  }

  if (e == "") {
    document.getElementById('err_msg').innerHTML += "Il msg è obbligatorio";
    result = result && false;
  }
  
  return result
}

＆＃13;

<html>

<body>


  <div class="menu">

  </div>

  <div class="column-left">
  </div>

  <div class="column-center"><br>

    <form name="form1" method="post" onsubmit="return validateForm()">
      <br> Nome
      <input type="text" name="nome">*
      <br><span class="error"><div id="err_nome"></div></span><br><br><br> Cognome
      <input type="text" name="cognome">*
      <br><span class="error"><div id="err_cognome"></div></span><br><br><br> Azienda
      <input type="text" name="azienda">*
      <br><span class="error"><div id="err_azienda"></div></span><br><br><br> Codice Fiscale
      <input type="text" name="CF">*
      <br><span class="error"><div id="err_CF"></div></span><br><br><br> Messaggio
      <textarea id="text" name="msg" rows="5" col="40" maxlength="2000"></textarea>*
      <br><span class="error"><div id="err_msg"></div></span><br>

      <br>

      <input type="submit" name="submit" value="submit">
      <br><br><br><br><br><br>
    </form>

  </div>

  <div class="column-right">
  </div>

  <div class="footer">

  </div>

</body>

</html>

＆＃13;

如何使用javascript验证表单？

1 个答案: