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(); 
    } 
});