Jquery validation doesn't work without page refresh in jQuery mobile

Question

I am using jquery validate.js to validate my contact form in a jquery mobile app. When I load a page via a URL or page refresh, the checks seem to work fine. But when I return to the contact form from another link to the page that is being updated, the verification does not stop.

It works when I refresh the page. I tried the following:

1) including contact.js before jQuery mobile js.

2) data-ajax="false" ;

3) using bind

 $(document).bind("mobileinit", function(){ $.extend( $.mobile , { ajaxEnabled: false }); }); 

4) refresh the form page using jQuery Mobile

5) using window.onload

 window.onload = function() { if(!window.location.hash) { window.location = window.location + '#loaded'; window.location.reload(); } } 

5) JQuery-Mobile: how to reload / refresh the inner page

6) Updating one temporary page after loading the first page Javascript only works on page refreshing in jQuery mobile phone

But that did not work. What I need to do is refresh the page once when I go to it. Here is my contact form code with jQuery mobile.

 <form method="post" action="" id="feedback" name="feedback"> <input type="text" name="user_name" data-role="none" id="name" value="" placeholder= "Your name*" /> <br /> <input class="email" required="true" type="text" name="user_email" data-role="none" id="email" value="" placeholder="Your Email*" /> <br /> <textarea cols="70" rows="12" class="required" name="user_message" id="c_message" data-role="none" placeholder="Your message*"> </textarea> <br /> <input type="submit" value="Send" data-mini="true" data-role="none" data-inline="true" class="green_like" id="send" /> </form> 

Here is the JS code in the "contact us" form.

 $(document).bind("pageinit",function(){ $("#feedback").validate({ submitHandler : function() { $.ajax({ type:'POST', url :'/some/url', data: $('#feedback').serialize(), success: function(resp) { if(resp==1) { $("#success_post_contact").html('<label style="color:green;margin-left: 6px;" >Thank you for contacting us.</label>'); } } });//end of ajax }//end of submit handler });//end of validate });//end of document.bind 

Answer 1

You didn’t do the right thing. To understand this situation, you need to understand how jQuery Mobile works. It uses ajax to load other pages.

The first page loads normally. His HEAD and BODY are loaded into the DOM, and they are waiting for other content. When the second page loads, only the BODY content is loaded into the DOM. And when I say only BODY content, I mean only the DIV page (with the data-role = "page" attribute) and nothing more. There are several solutions to this problem, and here is a list .