代码之家 › 专栏 › 技术社区 › Maso

如何使用javascript验证表单?

validation forms javascript

-1

Maso · 技术社区 · 7 年前

我是Stack Overflow的新手,也是编程的初学者,所以请宽恕我:) 我试图用javascript阻止在一个或多个字段为空时提交多字段表单。基本上,当我提交表单时,所有字段都为空,错误只会出现在第一个字段的下方,但其他字段没有任何变化,表单就会被发送。我确实提前表示歉意,因为这个话题已经在其他帖子中讨论过好几次了,但我不知道如何在工作中发挥作用。我正在使用以下代码(html和js在同一页中):

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

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

非常感谢你们中的人会帮助我。阿尔贝托

1 回复 | 直到 7 年前

Ludovit Mydla 7 年前

你有 return false; 在所有比较中,这将退出 validateForm() 第一个错误字段后的函数。如果要验证所有字段,请将结果保留在变量中,并在末尾返回。像这样:

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
}

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