如何使用JavaScript驗證此HTML表單？

Question

我正在使用這個HTML表單，我正在嘗試驗證字段。 我想使用JavaScript檢查每個字段是否為空。 如果該字段為空，我希望顯示隱藏的關聯div。

當前問題：如果兩個字段都留空，則只顯示proName的第一個div，而不顯示第二個div。 我怎樣才能讓它們出現？

 <html>
 <body>
 <form action="" method="post" class="form" name="form" onsubmit="return validateForm();">
      <p><label for="proName">Processors Name: </label>
           <input type="text" name="proName" id="proName"></p>
                <div id="alertProName" style="display:none;">
                     <p>Please fill in this field</p>
                </div>

      <p><label for="compName">Company Ordered Through: </label>
           <input type="text" name="compName" id="compName"></p>
                <div id="alertCompName" style="display:none;">
                     <p>Please fill in this field</p>
                </div>
 </form>

 <script type="text/javascript">
 function validateForm() {
      var x=document.forms["form"]["proName"].value;                    

      if (x==null || x=="") {
      var s = document.getElementById("alertProName").style.display="block";
      return false;
      }
 };

 function validateForm() {
      var z=document.forms["form"]["compName"].value;                   

      if (z==null || z=="") {
      var a = document.getElementById("alertCompName").style.display="block";
      return false;
      }
 };
 </script>
 </body>
 </html>

謝謝！

Answer 1

function validateForm(){
  var valid = true;
  var x=document.forms["form"]["proName"].value;                    
  if (x==null || x=="") {
    document.getElementById("alertProName").style.display="block"; //show the error message
    valid = false;
  }else{
    document.getElementById("alertProName").style.display="none"; // hide the error message
  }
  var z=document.forms["form"]["compName"].value;                   

  if (z==null || z=="") {
    document.getElementById("alertCompName").style.display="block";//show the error message
    valid = false;
  }else{
    document.getElementById("alertCompName").style.display="none"// hide the error message
  }
  return valid; // only if both are valid will we submit
}

Answer 2

驗證表單客戶端不是一個好主意，因為客戶端總是可以繞過它。

但是，如果您確實要在客戶端驗證表單，則可以使用HTML5表單驗證：

<input type="text" name="somefield" required />

required屬性告訴瀏覽器該字段是必需的。

確保使用HTML5 DOCTYPE（ <DOCTYPE HTML> ）。

示例： http ： //jsbin.com/ubuqan/1/edit

Answer 3

看看validateForm()做什么會很有幫助...
我認為它需要成為兩種驗證方法的包裝器，並在一次調用中確定要顯示哪個div。 目前的情況是，如果validateProName返回false，則不需要執行validateCompName

我會讓它做類似下面的事情，它將validateProName和validateCompName的值分配給局部變量，然后如果值為false則顯示它們的div。 然后，您將簡化現有方法......

<script type="text/javascript">
function validateForm() {
  var pro= validateProName();
  var comp = validateCompName();
  if (!pro) {
      var s = document.getElementById("alertProName").style.display="block";
  }
  if (!comp) {
      var a = document.getElementById("alertCompName").style.display="block";
  }
}
</script>

Answer 4

為什么不將它們組合成一個功能。

 <script type="text/javascript">
 function validateForm() {
      var x=document.forms["form"]["proName"].value;                    

      if (x==null || x=="") {
      var s = document.getElementById("alertProName").style.display="block";
      return false;

      var z=document.forms["form"]["compName"].value;                   

      if (z==null || z=="") {
      var a = document.getElementById("alertCompName").style.display="block";
      return false;
      }
 };

這實現了你想要的嗎？

安德魯

Answer 5

將表單更改為：

<form action="" method="post" class="form" name="form" onsubmit="return validateForm(this);">

然后你只需要一個函數來顯示div：

<script type="text/javascript">
function validateForm(form) {
    for (e in form.elements) {
        var element = form.elements[e];

        if (element.type == "text") {
            console.log(element.name);
            var elementName = element.name;
            elementName = "alert" + elementName.charAt(0).toUpperCase() + elementName.slice(1);
            var alertElement = document.getElementById(elementName);
            if (alertElement)
                alertElement.style.display = "block";
        }
    }

    return false;
}
</script>

這假定您在任何時候有一個文本字段，它也會有一個帶有相同名稱的DIV，前面帶有“alert”。

如何使用JavaScript驗證此HTML表單？

問題描述

5 個解決方案

解決方案1
3 已采納 2013-01-11 20:29:52

解決方案2
1 2013-01-11 20:36:40

解決方案3
0 2013-01-11 20:30:13

解決方案4
0 2013-01-11 20:31:04

解決方案5
-1 2013-01-11 20:33:07

如何使用JavaScript驗證此HTML表單？

問題描述

5 個解決方案

解決方案1 3 已采納 2013-01-11 20:29:52

解決方案2 1 2013-01-11 20:36:40

解決方案3 0 2013-01-11 20:30:13

解決方案4 0 2013-01-11 20:31:04

解決方案5 -1 2013-01-11 20:33:07

解決方案1
3 已采納 2013-01-11 20:29:52

解決方案2
1 2013-01-11 20:36:40

解決方案3
0 2013-01-11 20:30:13

解決方案4
0 2013-01-11 20:31:04

解決方案5
-1 2013-01-11 20:33:07