Параметры проверки jquery перед отправкой

Question

У меня есть страница со ссылкой, при использовании щелчка по ссылке появится новый тег select, а затем, когда пользователь отправит форму, я хочу, чтобы пользователь выбирал опцию для каждого тега select

вы можете перейти к последней функции 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); 

следующих возвращает следующий брат, не следующий брат, что это промежуток. Если следующий брат не является интервалом, он вернет значение null. В вашем случае следующий брат - это не span, это тег 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(), если у формы есть ошибки, чтобы предотвратить ее получение 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(); 
    } 
});