jQuery提交前检查值 [英] 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
您可以转到最后一个jquery函数,但是我放了一些创建选择标签的代码
you can go to the last jquery function , but i put some codes of creating the select tags
<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
}
});
});
但是垃圾邮件没有出现我想要的
but the spam doesn't appear as i want
推荐答案
请参阅: http://jsfiddle.net/ujrNu /
此后
if(errorCount==0){
$(this)[0].submit(); // submit form if no error
}
您应该添加:
else{
return false;
}
否则,您的表单仍会被发布.
otherwise your form will get posted anyway.
第二个问题是这一行:
$this.next('span').text(error);
next返回NEXT同级,而不是作为跨度的下一个同级.如果下一个同级不是跨度,它将返回null.在您的情况下,下一个兄弟不是跨度,而是A标记.所以你想要这个:
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);
这篇关于jQuery提交前检查值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!