jQuery的空文本輸入驗證

Question

我有一個HTML Form包含輸入文本字段和選擇標記。jQuery我確保那些輸入字段和選擇不是空的，但如果其中一個是空的，一條錯誤消息將顯示在旁邊那空字段和它的工作好了我，但我的問題是，如果輸入字段爲空，然後我填了，該錯誤信息不會刪除，

jQuery代碼

$(document).ready(function(){ 
    $("#aioForm").on('submit',function(e){ 
     var errorCount = 0; 
     $('span.errorMessage').text(''); 
     $('#addIO select').each(function(){ 
      var $this = $(this); 
      if(this.selectedIndex==0){ 
       var error = 'Please select a cell' ; 
       $this.next('span').text(error); 
       errorCount = errorCount + 1; 
      } 
     }); 
     var input = $("#aioForm input").val(); 
     if(input==''){ 
      $("#aioForm input").next('span').text("fill the name please"); 
      errorCount= errorCount+1; 
     } 
     if(errorCount>0){ 
      e.preventDefault(); 
     } 
     if(errorCount==0){ 
      $(this)[0].submit(); // submit form if no error 
     }else 
      return false; 
    }); 
}); 

HTML代碼

<div id="addIO"> 
    <form id="aioForm" method="POST" action="<?php echo URL; ?>InformationObject/addIO"> 
     <ul id="ioAddul"> 
      <li class="ioAddli"> 
       <p> 
        <label>Concept</label> 
        <select id="ConceptSelect"></select> 
        <span class="errorMessage"></span> 
       </p> 
       <p> 
        <label>Name</label> 
        <input type="text" id="aioConceptName" name="name" /> 
        <span class="errorMessage"></span> 
       </p> 
      </li> 
      <li class="ioAddli"> 
       <p> 
        <label>Concepts</label> 
        <a href="#" class="smallLink" id="aioShowLink">Show Concepts</a> 
       </p> 
       <div id="ioAddRelatedConcepts"> 
       </div> 
      </li> 
      <li class="ioAddli" id="ioAddContents"> 
       <p><label>Contents</label></p> 
       <p> 
        <label class="ioAddOneContent">write one info</label> 
        <input name="contents[]" type="text" class="longInput"/> 
        <span class="errorMessage"></span> 
        <a href="" class="smallLink" onclick="return ioAddNewContent(this)">new info</a> 
       </p> 
      </li> 
      <li class="ioAddli"id="ioAddOtherRelation"> 
       <a href="" onclick="return ioAddSetOtherRelation(this)"class="smallLink">add other relation</a> 
      </li> 
      <li> 
       <input type="submit" class="button1" value="save"/> 
      </li> 
     </ul> 
    </form> 
</div> 

最重要的語句是這個

$('span.errorMessage').text(''); 

，我用它，它只是有選擇的標籤，不適用於輸入文本字段 the full code

Answer 1

可以簡化你的代碼像下面：

$(document).ready(function(){ 
    $("#aioForm").on('submit',function(e){ 
     var errorCount = 0; 
     $('span.errorMessage').text(''); 
     // checkign for multiple select [now you have one] 
     var select = $('#addIO select').filter(function(){ 
      return this.selectedIndex == 0; 
     }).next('span').text('Please select a cell'); 
     // checking for inputs 
     var input = $("#aioForm input[type=text]").filter(function() { 
      return !this.value; 
     }).next('span').text("fill the name please"); 
     // no error checking 
     if(input.length==0 && select.length == 0){ 
      $(this)[0].submit(); // submit form if no error 
     } 
     e.preventDefault(); 
    }); 
}); 

DEMO

Answer 2

你需要做一個循環的每個輸入，在您的代碼只檢查第一輸入，你需要清空跨度如果輸入不爲空 取代

var input = $("#aioForm input").val(); 
    if(input==''){ 
     $("#aioForm input").next('span').text("fill the name please"); 
     errorCount= errorCount+1; 
    } 

通過

var inputs = $("#aioForm input"); 
      inputs.each(function(index, value) { 
       var input = $(this).val(); 
       if(input==''){ 
        $(this).next('span').text("fill the name please"); 
        errorCount= errorCount+1; 
       } else { 
        $(this).next('span').empty(); 
       } 
      }); 

好運