我有一个使用jquery validate和ajax验证和提交的脚本,该脚本在桌面上工作,但不在移动设备上。我无法找到问题。
他们进入点击但没有进一步,
它有两种形式,几乎完全相同但有一些细微差别。 这是我的javascript。 `
$(document).ready(function() {
$("#offerteSeperateForm #ck-button.submit").click(function() {
$("#offerteSeperateForm").validate({
ignore: ":hidden",
rules: {
name:{
minlength:2,
required:true
},
telephone:{
required:true,
minlength:10,
maxlength:10
},
email:{
required:true,
email: true
},
personen:{
required:true
},
personen:{
required:true,
number: true
},
day:{
required:true,
number: true,
maxlength:2,
max: 31,
min: 0
},
month:{
required:true,
number: true,
maxlength:2,
max: 12,
min: 0
},
year:{
required:true,
number: true,
min: <?php echo date('Y'); ?>
}
},
submitHandler: function (form) {
$.ajax({
var data = $('form#offerteSeperateForm').serialize();
//this is the php file that processes the data and send mail
url: "<?php bloginfo('template_url'); ?>/processOfferteSeperate.php",
//GET method is used
type: "POST",
//pass the data
data: data,
//Do not cache the page
cache: false,
//success
success: function (html) {
//if process.php returned 1/true (send mail success)
if (html==1) {
alert('succes');
window.location = "<?php echo site_url(); ?>/?p=146";
//if process.php returned 0/false (send mail failed)
} else alert('Sorry, er ging iets mis. Wilt u het nogmaals proberen?');
}
});
return false;
}
});
});
$( "#offerteForm #ck-button.submit" ).click(function() {
$("#offerteForm").validate({
ignore: ":hidden",
rules: {
name:{
minlength:2,
required:true
},
telephone:{
required:true,
minlength:10,
maxlength:10
},
email:{
required:true,
email: true
},
personen:{
required:true
},
personen:{
required:true,
number: true
},
day:{
required:true,
number: true,
maxlength:2,
max: 31,
min: 0
},
month:{
required:true,
number: true,
maxlength:2,
max: 12,
min: 0
},
year:{
required:true,
number: true,
min: <?php echo date('Y'); ?>
}
},
submitHandler: function(form) {
$.ajax({
var data = $('form#offerteForm').serialize();
//this is the php file that processes the data and send mail
url: "<?php bloginfo('template_url'); ?>/processOfferte.php",
//GET method is used
type: "POST",
//pass the data
data: data,
//Do not cache the page
cache: false,
//success
success: function (html) {
alert('succes');
//if process.php returned 1/true (send mail success)
if (html==1) {
window.location = "<?php echo site_url(); ?>/?p=146";
//if process.php returned 0/false (send mail failed)
} else alert('Sorry, er ging iets mis. Wilt u het nogmaals proberen?');
}
});
return false;
}
});
});
});
` 这些是表格标签
<form action="" id="offerteForm" method="post">
<form action="" id="offerteSeperateForm" method="post">
答案 0 :(得分:0)
您的整个问题是由于认为.validate()
需要在click
处理程序中而引起的。
.validate()
方法不是用于触发验证测试,也不能在同一表单上多次调用。
只需在DOM ready事件处理程序中调用.validate()
方法一次即可。 .validate()
方法用于初始化插件。捕获click
事件(只要按钮包含type="submit"
),然后自动执行验证。
修改强>:
根据评论,OP仍然存在很多混乱。
换句话说,使用您的代码,插件甚至不会在第一次点击之前进行初始化。
换句话说,您的第一次点击只会初始化插件...然后它就会停留在那里,直到您第二次点击为止。此行为可能在每个浏览器中都不同,因为它取决于每个事件的时间(点击是初始化插件并尝试在几乎同一时刻提交表单)。因此,使其一致且可预测的方法是简单地在DOM ready事件处理程序中初始化插件,并允许插件自己捕获click
事件......完全按照设计的那样。
.validate()
方法永远不应该在click
处理程序中。
$(document).ready(function(){ // DOM ready event handler
$('#myform').validate({ // initialize the plugin
....
DEMO:http://jsfiddle.net/6he8a15n/
您是否在使用jQuery Mobile或仅仅在移动平台上遇到此问题并不完全清楚。但是,就jQuery Mobile而言,DOM ready事件处理程序看起来有些不同......
$(document).on('pageinit', function(){ // DOM ready event handler for jQuery Mobile
$('#myform').validate({ // initialize the plugin
....