问题描述
我有一个表格
与引导
工作正常。而jQuery验证工作正常。当谈到 AJAX
提交code,有什么不对。提交的作品即使表格
未验证。
可以说,我离开了一个字段为空,pressed提交,它突出了错误的空场,但阿贾克斯仍然提交了表格
。
我怎样才能停止行动,并要求进行验证?
这是表格
标记:
<形式ID =预订的方法=后级=形行动=>
....这里的一些输入字段....
<按钮类型=提交ID =提交级=BTN BTN-大BTN-块BTN小学>现在预订< /按钮>
< /形式GT;
这是jQuery的验证:
$('表')。验证({
规则:{
姓:{MINLENGTH:2,最大长度:40,要求:真实},
名字:{MINLENGTH:2,最大长度:40,要求:真实},
电子邮件:{电子邮件:真正的,必需的:真正的},
国家:{要求:真实},
手机:{MINLENGTH:2,最大长度:40,要求:真实},
地址:{MINLENGTH:3,要求:真实}
},
});
这部分是阿贾克斯()
提交:
$('#预约)。在('提交',函数(E){
即preventDefault();
变种形式= $(本);
VAR POST_URL = form.attr('行动');
变种post_data = form.serialize();
$('#装载机,形式)。html的('< IMG SRC =http://www.fethiye-tours.com/assets/images/lightbox/loading.gif/>请稍候... );
$阿贾克斯({
键入:POST,
网址:http://www.fethiye-tours.com/book.php,
数据:post_data,
成功:函数(MSG){
$(形式).fadeOut(500,函数(){
form.html(MSG).fadeIn();
});
}
});
});
报价OP
这是因为您的自定义。对('提交')
处理程序是压倒一切的jQuery验证插件内置的提交处理。
参见为jQuery验证插件中的文档,
在换句话说,任何阿贾克斯()
code那张 submitHandler
的回调函数中,只有当触发的形式是有效的。因此,摆脱你的整个。对('提交')
处理函数,并做到这一点,而不是...
( BTW:适当的缩进/格式code是给大家更好的阅读和解决的)
$(文件)。就绪(函数(){
$('#预约)验证({//< - 将'.validate()'到窗体
//任何规则,选项和回调,
规则:{
名字: {
// MINLENGTH:2,
//最大长度:40,
rangelength:[2,40],//< - 结合MINLENGTH和最大长度规则
要求:真实的
},
//更多的规则,
},
submitHandler:功能(形式){//< - 只有火灾时,形式是有效的
$('#装载机,$(形式))HTML('< IMG SRC =http://www.fethiye-tours.com/assets/images/lightbox/loading.gif/>请等待。 ..');
$阿贾克斯({
键入:POST,
网址:http://www.fethiye-tours.com/book.php,
数据:$(形式).serialize()
成功:函数(MSG){
$(形式).fadeOut(500,函数(){
$(形式)。html的(MSG).fadeIn();
});
}
}); //< - 结束。阿贾克斯()
返回false; //< - 块默认表单操作
} //< - 结束submitHandler'回调
}); //< - 结束.validate()
}); //< - 结束DOM就绪处理程序
它看起来并不像你所需要的 POST_URL
变量,因为你已经声明网址
在您阿贾克斯()
。还不如省下线,并与做同样的 post_data 了。
I've a
form
with bootstrap
which works fine. And jQuery Validation works fine. When it comes to ajax
submit code, there is something wrong. Submit works even if the form
is not validated.
Lets say I left one field empty and pressed submit, it highlights the error on the empty field but ajax still submits the
form
.
How can I stop action and ask for validation?
This is the
form
markup:
<form id="booking" method="post" class="form" action="" >
....some input fields here....
<button type="submit" id="submit" class="btn btn-large btn-block btn-primary">Book Now</button>
</form>
This is the jQuery Validation:
$('form').validate({
rules: {
firstname: {minlength: 2, maxlength: 40, required: true},
lastname: {minlength: 2, maxlength: 40, required: true},
email: {email: true, required: true},
country: {required: true},
mobile: {minlength: 2, maxlength: 40, required: true},
address: {minlength: 3, required: true}
},
});
This part is the
ajax()
submit:
$('#booking').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var post_url = form.attr('action');
var post_data = form.serialize();
$('#loader', form).html('<img src="http://www.fethiye-tours.com/assets/images/lightbox/loading.gif" /> Please Wait...');
$.ajax({
type: 'POST',
url: 'http://www.fethiye-tours.com/book.php',
data: post_data,
success: function(msg) {
$(form).fadeOut(500, function(){
form.html(msg).fadeIn();
});
}
});
});
解决方案
Quote OP:
That's because your custom
.on('submit')
handler is over-riding the jQuery Validation plugin's built-in submit handler.
Referring to the documentation for the jQuery Validation plugin,
In other words, any
.ajax()
code goes inside of the submitHandler
callback function, which only fires when the form is valid. So get rid of your entire .on('submit')
handler function and do this instead...
(BTW: properly indented/formatted code is better for everyone to read and troubleshoot)
$(document).ready(function() {
$('#booking').validate({ // <- attach '.validate()' to your form
// any rules, options, and callbacks,
rules: {
firstname: {
// minlength: 2,
// maxlength: 40,
rangelength: [2,40], // <- combines minlength and maxlength rules
required: true
},
// more rules,
},
submitHandler: function(form) { // <- only fires when form is valid
$('#loader', $(form)).html('<img src="http://www.fethiye-tours.com/assets/images/lightbox/loading.gif" /> Please Wait...');
$.ajax({
type: 'POST',
url: 'http://www.fethiye-tours.com/book.php',
data: $(form).serialize(),
success: function(msg) {
$(form).fadeOut(500, function(){
$(form).html(msg).fadeIn();
});
}
}); // <- end '.ajax()'
return false; // <- block default form action
} // <- end 'submitHandler' callback
}); // <- end '.validate()'
}); // <- end DOM ready handler
It doesn't look like you need the
post_url
variable since you're already declaring the url
within your .ajax()
. Might as well save a line and do the same with post_data
too.
这篇关于阿贾克斯提交表单,即使其未通过验证与引导验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!