AJAX和JQuery验证问题 [英] AJAX and jQuery validate issue
问题描述
所以，我被困在这个死胡同。我有AJAX脚本和jQuery验证插件。有了这个脚本，当我的页面加载空的联系表单自动提交本身。如果我移动或添加 $（'＃提交）。点击（函数（）{在AJAX脚本的一部分，下方 $（文件）。就绪（函数（）{然后提交它忽略了我的验证形式。
任何帮助将大大AP preciated。
＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js '＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js'>＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
变种captcha_a = Math.ceil（的Math.random（）* 10）;
变种captcha_b = Math.ceil（的Math.random（）* 10）;
VAR captcha_c = captcha_a + captcha_b;
功能generate_captcha（ID）{
变种的id =（id）的？编号：'lcaptcha;
$（＃+ id）的html的（captcha_a +++ captcha_b +=）;
}
$（文件）。就绪（函数（）{
$（'＃提交）。点击（函数（）{
jQuery.validator.addMethod（数学，
功能（价值元素，则params）{返回this.optional（元）||值== PARAMS [0] +参数[1]; }，
jQuery.format（请输入正确的值{0} + {1}）
）;
$（＃commentform）。验证（{
规则：{
验证码：{
数学：[captcha_a，captcha_b]
}
}
}）;
}）;
}）
＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
变种名称= $（'输入[名称=名称]）;
VAR手机= $（'输入[名称=电话]'）;
变种的电子邮件= $（'输入[名称=电子邮件]'）;
VAR原因= $（'选择[名称=理由】'）;
VAR信息= $（'textarea的[名称= INFO]'）;
VAR数据=NAME ='+ name.val（）+'＆放大器;手机='+ phone.val（）+'＆放大器;电子邮件='+ email.val（）+'＆放大器;原因='+ reason.val （）+'＆放大器;信息='+ EN codeURIComponent（info.val（））;
$（'。装）显示（）。
$阿贾克斯（{
网址：ajaxformtoemail.php
键入：GET，
数据：数据，
缓存：假的，
成功：函数（HTML）{
如果（HTML代码== 1）{
$（'表'）淡出（慢）。
$（完成。）淡入（慢）。
}其他警报（'对不起，意外错误，请稍后再试。）;
}
}）;
返回false;
}）;
＆LT; / SCRIPT＆GT;
您 AJAX 是在页面加载运行，因为没有什么是停止它。你需要把 AJAX code事件处理程序，因此，当你的形式通过验证的唯一的被称为如果/里面。
以下是正确执行的验证插件的例子。而你并不需要把的validate（）点击处理器中。验证插件有一堆内置的包括其自己的处理程序一个 submitHandler 的火灾时，表单通过验证。
＆LT;脚本类型=文/ JavaScript的'＆GT;
$（文件）。就绪（函数（）{
jQuery.validator.addMethod（数学，
功能（价值元素，则params）{返回this.optional（元）||值== PARAMS [0] +参数[1]; }，
jQuery.format（请输入正确的值{0} + {1}）
）;
$（'表'）。验证（{
规则{
//你的规则
}，
submitHandler：功能（形式）{
$阿贾克斯（{
//你的ajax参数
}）;
返回false;
}
}）;
}）;
＆LT; / SCRIPT＆GT;
一些枝节问题...
-
您code会更容易阅读和放大器;如果你使用正确的缩进和标准格式解决。
-
没有需要使用重复
的document.ready功能。一切都可以在里面之一。 -
就像在＃2，你不需要的
＆LT单独设置;脚本＆GT;＆LT; / SCRIPT＆GT;标签来包含code。一切都曾经被封闭。
So I got stuck in this dead end. I have AJAX script and jQuery Validation plug-in. With this script, when my page loads empty contact form automatically submits on itself. If I move or add $('#submit').click(function () { over AJAX script part, right below $(document).ready(function() { then on submit it ignores my validation form.
Any help will be greatly appreciated.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js'></script>
<script>
var captcha_a = Math.ceil(Math.random() * 10);
var captcha_b = Math.ceil(Math.random() * 10);
var captcha_c = captcha_a + captcha_b;
function generate_captcha(id){
var id = (id) ? id : 'lcaptcha';
$("#"+id).html(captcha_a + " + " + captcha_b + " = ");
}
$(document).ready(function() {
$('#submit').click(function () {
jQuery.validator.addMethod("math",
function(value, element, params) { return this.optional(element) || value == params[0] + params[1]; },
jQuery.format("Please enter the correct value for {0} + {1}")
);
$("#commentform").validate({
rules: {
captcha: {
math: [captcha_a, captcha_b]
}
}
});
});
})
</script>
<script>
$(document).ready(function() {
var name = $('input[name=name]');
var phone = $('input[name=phone]');
var email = $('input[name=email]');
var reason = $('select[name=reason]');
var info = $('textarea[name=info]');
var data = 'name=' + name.val() + '&phone=' + phone.val() + '&email=' + email.val() +'&reason=' + reason.val() + '&info=' + encodeURIComponent(info.val());
$('.loading').show();
$.ajax({
url: "ajaxformtoemail.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
if (html==1) {
$('.form').fadeOut('slow');
$('.done').fadeIn('slow');
} else alert('Sorry, unexpected error. Please try again later.');
}
});
return false;
});
</script>
Your ajax is running on page load because nothing is stopping it. You need to put the ajax code inside an event handler so it's only called if/when your form passes validation.
The following is an example of the proper implementation of the Validation Plugin. And you do not need to put the validate() inside a click handler. The Validation plugin has a bunch of its own handlers built in including a submitHandler that fires when the form passes validation.
<script type='text/javascript'>
$(document).ready(function() {
jQuery.validator.addMethod("math",
function(value, element, params) { return this.optional(element) || value == params[0] + params[1]; },
jQuery.format("Please enter the correct value for {0} + {1}")
);
$('form').validate({
rules {
// your rules
},
submitHandler: function(form) {
$.ajax({
// your ajax parameters
});
return false;
}
});
});
</script>
Validation Plugin Documentation
Some side issues...
Your code would be much easier to read & troubleshoot if you used proper indentation and standard formatting.
There is not need to use duplicate
document.readyfunctions. Everything can be inside one.Like in #2, you do not need separate sets of
<script></script>tags to contain your code. Everything can be enclosed once.
这篇关于AJAX和JQuery验证问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
