jquery验证和ajax无法在移动设备上运行

时间:2014-12-05 08:12:21

标签: jquery ajax mobile jquery-validate

我有一个使用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">

1 个答案:

答案 0 :(得分:0)

您的整个问题是由于认为.validate()需要在click处理程序中而引起的。

.validate()方法不是用于触发验证测试,也不能在同一表单上多次调用。

只需在DOM ready事件处理程序中调用.validate()方法一次即可。 .validate()方法用于初始化插件。捕获click事件(只要按钮包含type="submit" ),然后自动执行验证。


修改

根据评论,OP仍然存在很多混乱。

  • 换句话说,使用您的代码,插件甚至不会在第一次点击之前进行初始化。

  • 换句话说,您的第一次点击只会初始化插件...然后它就会停留在那里,直到您第二次点击为止。此行为可能在每个浏览器中都不同,因为它取决于每个事件的时间(点击是初始化插件并尝试在几乎同一时刻提交表单)。因此,使其一致且可预测的方法是简单地在DOM ready事件处理程序中初始化插件,并允许插件自己捕获click事件......完全按照设计的那样。

    < / LI>

.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
        ....

移动演示:http://jsfiddle.net/6he8a15n/1/