jquery validation and ajax not working on mobile

Question

I have a script that validates and submits using jquery validate and ajax which is working on desktop, but not on mobile. I can't find the problem.

They are going into the click but not further,

Its about two form, which are almost exactly the same but some minor differences. this is my 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;

                }   
            });
        });
    });

` these are the form tags

<form action="" id="offerteForm" method="post"> <form action="" id="offerteSeperateForm" method="post">

i think inside submithandler "return false;" is getting executed before ajax completes. — Dave, Dec 05 '14 at 08:25
I added return false as a something I read on stackoverflow as someone elses solution so i thought i tried, but why is it working on desktop and not on mobile? — Tiemen Tuinstra, Dec 05 '14 at 08:57
In general, you don't have to put the `$.validate` calls inside of `click` handlers. They can be put at the top level, inside a `$(document).ready(function(){ //validate here });`. Assuming your submit buttons are actually `` it will just do the right thing. I'm not sure that will solve your problem, but it won't hurt! Beyond that, you need to make a simpler example and include all the relevant HTML — Ryley, Dec 05 '14 at 16:23
Show the relevant HTML. And are you using jQuery Mobile or are you just talking about a mobile browser? — Sparky, Dec 08 '14 at 16:59

Sparky · Answer 1 · 2014-12-08T17:03:59.107

Your whole problem is caused by thinking that .validate() needs to be inside of a click handler.

The .validate() method is not for triggering a validation test and cannot be called multiple times on the same form.

Simply call the .validate() method once within your DOM ready event handler. The .validate() method is for initializing the plugin. The click event is captured (as long as button contains a type="submit") and then validation is performed... automatically.

EDIT:

Based on the comment, there's still much confusion by the OP.

In other words, with your code the plugin is NOT even initialized until the first click.
In other other words, your first click only initializes the plugin... then it sits there and does nothing until you click a second time. This behavior could be different in every browser since it depends on the timing of each event (the click is both initializing the plugin and trying to submit the form at nearly the same instant). So the way to make it consistent and predictable is to simply initialize the plugin within the DOM ready event handler and allow the plugin to capture the click event by itself... exactly as it was designed.

The .validate() method is never supposed to be inside of a click handler.

$(document).ready(function(){ // DOM ready event handler

    $('#myform').validate({ // initialize the plugin
        ....

DEMO: http://jsfiddle.net/6he8a15n/

It's not entirely clear whether you're having this issue with jQuery Mobile or simply on a mobile platform. However, just in case for jQuery Mobile, the DOM ready event handler looks somewhat different...

$(document).on('pageinit', function(){ // DOM ready event handler for jQuery Mobile

    $('#myform').validate({ // initialize the plugin
        ....

Mobile DEMO: http://jsfiddle.net/6he8a15n/1/

the submit buttons are indeed type=submit, but i need the click events due to other components on the page. The script for the two forms totaly works on desktop and tablet but not on mobile, which i think is strange. — Tiemen Tuinstra, Dec 08 '14 at 12:06
@TiemenTuinstra, you are showing us nothing inside the `click` handler except for `.validate()`. Since the `.validate()` method is **only used for initializing** the plugin, you should **never** have it inside of a `click` event handler. When the plugin is properly initialized, you would not have the problems you describe. — Sparky, Dec 08 '14 at 15:50

jquery validation and ajax not working on mobile

1 Answers1