jquery check values before submit

问题:

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

you can go to the last jquery function , but i put some codes of creating the select tags

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

and this is the form validation

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

but the spam doesn't appear as i want

回答1:

See: http://jsfiddle.net/ujrNu/

After this

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

you should add:

else{    return false; } 

otherwise your form will get posted anyway.

The second problem is this line:

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

next returns the NEXT sibling, not the next sibling that is a span. If the next sibling is NOT a span, it will return null. In your case, the next sibling isn't a span, it's an A tag. So you want this:

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

回答2:

you should not use ready for document elements, use $(document).ready(function(){...}) and you can use preventDefault() if form has errors to prevent it from getting submitted:

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

回答3:

$("#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

文章来源: jquery check values before submit