jquery提交前檢查值

Question

我有一個鏈接頁面，當使用點擊鏈接時會出現一個新的選擇標籤，然後當用戶提交表單時，我想確保用戶爲每個選擇標籤選擇一個選項

，你可以去到最後jQuery的功能，但我把創建選擇標籤

HTML的部分代碼

<div class="container" id="addCell"> 
    <form id="acForm"method="POST" action="<?php echo URL; ?>Cell/addCell"> 
     <ul> 
      <li> 
       <p> 
        <label>Name</label> 
        <input type="text" name="name"class="longInput1"/> 
       <p> 
       <p> 
        <label>City</label> 
        <select id="countrySelector" name="city"> 
        </select> 
       </p> 
      </li> 
      <li id="intersectionCells"> 
       <p> 
        <label>Inserted cells</label> 
        <a href="#" class="smallLink" id="acaclink">new</a> 
       </p> 
      </li> 
      <li> 
       <input type="submit" class="button1" value="save"/> 
      </li> 
     </ul> 
    </form> 
</div> 

jQuery的

$("#addCell").ready(function(){ 
    $("#addCell").on('click',"#acaclink",function(){ 
     var me = this; 
     var cityName = $("#countrySelector").val(); 
     $.getJSON("http://localhost/Mar7ba/Cell/getCellsInCity/"+cityName+"/TRUE",function(data){ 
      var options = ''; 
      options+="<option>Select Cell</option>"; 
      for(var i=0;i<data.length;i++){ 
       options += "<option>"+data[i]+"</option>"; 
      } 
      $(me).closest('li').append('<p>\n\ 
      <label>Select Cell</label>\n\ 
      <select name="acSelect[]">\n\ 
      '+options+'\n\ 
</select>\n\ 
<a href="#" class="removeA">delete</a>\n\ 
<span class="errorMessage"></span>\n\ 
</p>'); 
     }); 
    }); 
}); 
$("#addCell").ready(function(){ 
    $("#addCell").on('click',".removeA",function(){ 
     $(this).closest('p').remove(); 
    }); 
}); 
$("#addCell").ready(function(){ 
    $("#countrySelector").change(function(){ 
     var cityName = $("#countrySelector").val(); 
     $.getJSON("http://localhost/Mar7ba/Cell/getCellsInCity/"+cityName+"/TRUE",function(data){ 
      var options = ''; 
      options+="<option>Select Cell</option>"; 
      for(var i=0;i<data.length;i++){ 
       options += "<option>"+data[i]+"</option>"; 
      } 
      $("#intersectionCells select").html(options); 
     }); 
    }); 
}); 

，這是表單驗證

$("#addCell").ready(function(){ 
    $("#acForm").on('submit',function(){ 
     var errorCount = 0; 
     $('span.errorMessage').text(''); 
     $('#intersectionCells select').each(function(){ 
      var $this = $(this); 
      if($this.val() === 'Select Cell'){ 
       var error = 'Please select a cell' ; // take the input field from label 
       $this.next('span').text(error); 
       errorCount = errorCount + 1; 
      } 
     }); 
     if(errorCount==0){ 
      $(this)[0].submit(); // submit form if no error 
     } 
    }); 
}); 

但我想

Answer 1

參見：http://jsfiddle.net/ujrNu/

這

if(errorCount==0){ 
      $(this)[0].submit(); // submit form if no error 
     } 

後你應該增加：

else{ 
    return false; 
} 

否則你的形式將得到反正公佈。

第二個問題是這一行：

$this.next('span').text(error); 

下一個返回下一個兄弟姐妹，沒有一個兄弟是一個跨度。如果下一個兄弟不是一個跨度，它將返回空值。在你的情況下，下一個兄弟不是一個跨度，它是一個A標籤。所以你想這個：

$this.siblings('span :first').text(error); 

Answer 2

$("#acForm").on('submit',function (e){ 
     var errorCount = 0; 
     $('span.errorMessage').text(''); 
     $('#intersectionCells select').each(function(){ 
      var $this = $(this); 
      if($this.val() === 'Select Cell'){ 
       var error = 'Please select a cell' ; // take the input field from label 
       $this.next('span').text(error); 
       errorCount = errorCount + 1; 
      } 
     }); 
     if(errorCount==0){ 
      $(this)[0].submit(); // submit form if no error 
     } 
     e.preventDefault(); // this will stop the form submit 
    }); 

DEMO

Answer 3

你不應該使用ready的文檔元素的垃圾沒有出現，使用$(document).ready(function(){...})，如果表單有錯誤可以使用preventDefault()以防止它變成subm itted：

$("#acForm").on('submit',function (e){ 
    var errorCount = 0; 
    $('span.errorMessage').text(''); 
    $('#intersectionCells select').each(function(){ 
     var $this = $(this); 
     if ($this.val() == 'Select Cell'){ 
      var error = 'Please select a cell' ; 
      $this.next('span').text(error); 
      errorCount++; 
     } 
    }); 

    if (errorCount > 0) { 
     e.preventDefault(); 
    } 
});