所以,我被困在这个死胡同。我有AJAX脚本和jQuery验证插件。有了这个脚本,当我的页面加载空的联系表单自动提交本身。如果我移动或添加 $('#提交)。点击(函数(){
在AJAX脚本的一部分,下方 $(文件)。就绪(函数(){
然后提交它忽略了我的验证形式。
任何帮助将大大AP preciated。
<脚本类型=文/ JavaScript的SRC =HTTP://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js '>< / SCRIPT>
<脚本类型=文/ JavaScript的SRC =HTTP://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js'>< / SCRIPT>
<脚本>
变种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]
}
}
});
});
})
< / SCRIPT>
<脚本>
$(文件)。就绪(函数(){
变种名称= $('输入[名称=名称]);
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;
});
< / SCRIPT>
解决方案
您 AJAX
是在页面加载运行,因为没有什么是停止它。你需要把 AJAX
code事件处理程序,因此,当你的形式通过验证的唯一的被称为如果/里面。
以下是正确执行的验证插件的例子。而你并不需要把的validate()
点击处理器中。验证插件有一堆内置的包括其自己的处理程序一个 submitHandler
的火灾时,表单通过验证。
<脚本类型=文/ JavaScript的'>
$(文件)。就绪(函数(){
jQuery.validator.addMethod(数学,
功能(价值元素,则params){返回this.optional(元)||值== PARAMS [0] +参数[1]; },
jQuery.format(请输入正确的值{0} + {1})
);
$('表')。验证({
规则{
//你的规则
},
submitHandler:功能(形式){
$阿贾克斯({
//你的ajax参数
});
返回false;
}
});
});
< / SCRIPT>
验证插件文档
一些枝节问题...
您code会更容易阅读和放大器;如果你使用正确的缩进和标准格式解决。
没有需要使用重复的document.ready
功能。一切都可以在里面之一。
就像在#2,你不需要的&LT单独设置;脚本>< / SCRIPT>
标签来包含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.ready
functions. 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.
相关推荐
最新文章