title: jquery check values before submit
body: <p>i have a page with a link , when use clicks the link a new select tag will be appeared , then when the user submit the form i want to ensure that the user select an option for each select tag</p>
  
  <p> you can go to the last jquery function , but i put some codes of creating the select tags</p>
  
  <h1>html</h1>
  
  <pre><code>&lt;div class="container" id="addCell"&gt;
      &lt;form id="acForm"method="POST" action="&lt;?php echo URL; ?&gt;Cell/addCell"&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;p&gt;
                      &lt;label&gt;Name&lt;/label&gt;
                      &lt;input type="text" name="name"class="longInput1"/&gt;
                  &lt;p&gt;
                  &lt;p&gt;
                      &lt;label&gt;City&lt;/label&gt;
                      &lt;select id="countrySelector" name="city"&gt;
                      &lt;/select&gt;
                  &lt;/p&gt;
              &lt;/li&gt;
              &lt;li id="intersectionCells"&gt;
                  &lt;p&gt;
                      &lt;label&gt;Inserted cells&lt;/label&gt;
                      &lt;a href="#" class="smallLink" id="acaclink"&gt;new&lt;/a&gt;
                  &lt;/p&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;input type="submit" class="button1" value="save"/&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>jquery</h1>
  
  <pre><code>$("#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+="&lt;option&gt;Select Cell&lt;/option&gt;";
              for(var i=0;i&lt;data.length;i++){
                  options += "&lt;option&gt;"+data[i]+"&lt;/option&gt;";
              }
              $(me).closest('li').append('&lt;p&gt;\n\
              &lt;label&gt;Select Cell&lt;/label&gt;\n\
              &lt;select name="acSelect[]"&gt;\n\
               '+options+'\n\
  &lt;/select&gt;\n\
  &lt;a href="#" class="removeA"&gt;delete&lt;/a&gt;\n\
  &lt;span class="errorMessage"&gt;&lt;/span&gt;\n\
  &lt;/p&gt;');
          });
      });
  });
  $("#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+="&lt;option&gt;Select Cell&lt;/option&gt;";
              for(var i=0;i&lt;data.length;i++){
                  options += "&lt;option&gt;"+data[i]+"&lt;/option&gt;";
              }
              $("#intersectionCells select").html(options);
          });
      });
  });
  </code></pre>
  
  <p>and this is the form validation</p>
  
  <pre><code>$("#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
          }
      });
  });
  </code></pre>
  
  <p>but the spam doesn't appear as i want </p>