檢查HTML表單上的空字段

Question

我試圖在HTML中創建表單，並試圖確保任何字段不爲空。

下面是形式

<form role="form" id="companyDetails" name="companyDetails" method="post" action="saveCompanyDetails.jsp" onsubmit="return false;"> 
    <div class="col-lg-6"> 
     <div class="form-group"> 
      <label>Company Name</label> 
      <input type="text" class="form-control" id="cmpname" name="cmpname"> 
      <p id="cmpnameError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
     <div class="form-group"> 
      <label>Description</label> 
      <textarea class="form-control" rows="3" id="desc" name="desc"></textarea> 
      <p id="descError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
     <div class="form-group"> 
      <label>Url</label> 
      <input type="text" class="form-control" name="url" id="url"> 
      <p id="urlError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
     <div class="form-group"> 
      <label>Email Id</label> 
      <input type="text" class="form-control" name="emailid" id="emailid"> 
      <p id="emailidError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
     <div class="form-group"> 
      <label>Address</label> 
      <textarea class="form-control" rows="3" id="address" name="address"></textarea> 
      <p id="addressError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
     <h1>All Links <i class="fa fa-link"></i></h1> 
     <div class="form-group"> 
      <label>Facebook Link</label> 
      <input type="text" class="form-control" name="fblink" id="fblink"> 
      <p id="fblinkError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
     <div class="form-group"> 
      <label>Twitter Link</label> 
      <input type="text" class="form-control" name="twlink" id="twlink"> 
      <p id="twlinkError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
    </div> 

<!-- /.col-lg-6 (nested) --> 
    <div class="col-lg-6"> 
     <div class="form-group"> 
      <label>Linkedin Link</label> 
      <input type="text" class="form-control" name="linkinlink" id="linkinlink"> 
      <p id="linkinlinkError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
     <div class="form-group"> 
      <label>Download Link</label> 
      <input type="text" class="form-control" name="downlink" id="downlink"> 
      <p id="downlinkError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
     <div class="form-group"> 
      <label>Live Help Link</label> 
      <input type="text" class="form-control" name="livehelplink" id="livehelplink"> 
      <p id="livehelpError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
     <div class="form-group"> 
      <label>Terms & Condition Link</label> 
      <input type="text" class="form-control" name="tclink" id="tclink"> 
      <p id="tclinkError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
     <div class="form-group"> 
      <label>Promotion Link</label> 
      <input type="text" class="form-control" name="prolink" id="prolink"> 
      <p id="prolinkError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
     <div class="form-group"> 
      <label>Sign Up Link</label> 
      <input type="text" class="form-control" name="signuplink" id="signuplink"> 
      <p id="signuplinkError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
     <div class="form-group"> 
      <label>Affiliate Link</label> 
      <input type="text" class="form-control" name="affiliatelink" id="affiliatelink"> 
      <p id="affiliatelinkError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
     <div class="form-group"> 
      <label>Game Link</label> 
      <input type="text" class="form-control" name="gamelink" id="gamelink"> 
      <p id="gamelinkError" style="display: none; color: red; font-weight: bold;"></p> 
     </div> 
     <button type="submit" class="btn btn-default" onclick="submitData()"><i class="fa fa-check"></i>Submit</button> 
     <button type="reset" class="btn btn-default"><i class="fa fa-refresh"></i>Reset</button> 
    </div> 
</form> 

注意，我有一個<p>標籤的正下方的每個輸入字段，其ID值是從它的相應的輸入字段的ID構成的HTML。例如。下面的文本字段cmpname的<p>標籤被ID cmpnameError

現在顯示下面的文本字段中顯示錯誤消息的JavaScript代碼如下

function submitData() { 
var elements = document.querySelectorAll('#companyDetails input, #companyDetails textarea'); 

for (var i = 0; i < elements.length; i++) { 
    if (elements[i].value == "") { 
     var errorElementId = "#" + elements[i].id + "Error"; 
     // alert("Generated ID is " + errorElementId); 
     document.getElementById(errorElementId).style.display = ''; 
     document.getElementById(errorElementId).innerHTML = "Please enter a value for this field"; 
     return false; 
    } 
} 
document.forms['companyDetails'].submit(); 
return true; 
} 

我的問題是，正確的錯誤消息是給當我點擊提交時沒有顯示在表單上。

有人可以幫我關於這個嗎？非常感謝你提前。

這裏是的jsfiddle鏈路https://jsfiddle.net/v8ooy2e1/

Answer 1

英鎊符號用於使用querySelectorAll選擇帶有id的元素，但不應與getElementById一起使用。

刪除這裏的井號：

var errorElementId = "#" + elements[i].id + "Error"; 

應該是：

var errorElementId = elements[i].id + "Error"; 

Working Fiddle

Answer 2

你知道，假設IE 10，你可以跳過這一切的JavaScript花式，只是使用了「必需的」屬性：

<input type="text" class="form-control" id="cmpname" name="cmpname" required> 

這會調用瀏覽器支持表單驗證。

Answer 3

爲什麼你：

var errorElementId = "#" + elements[i].id + "Error"; 

離開了 「＃」標誌。

Answer 4

如果你可以使用jQuery

var isValid = true; 
$("#companyDetails").submit(function(event) { 
    $("input").each(function() { 
     var element = $(this); 
     if (element.val() == "") { 
      isValid = false; 

     } 
    }) 
    if (!isValid) { 
     alert("nopes"); 

    } 
}); 

FIDDLE