Android + PhoneGap + jQuery Validate - not firing

问题

I'm using jQuery Mobile with jQuery Validate. I have multiple forms that post with ajax serialize once all pages have been completed.

The 'next' button below works on iOS and Android when accessed from the native browser. When I package with PhoneGap and run on Android, the validation does not fire. Everything else works fine.

If I remove the valid() condition, the button works as expected. So it must be an issue with how I'm using jQuery Validate.

I've tried shifting the order of things in various ways. I've tried:

if (!$("#infofm").valid()) {

And

if($("#infofm").valid()) {

Always the same result - works in native browsers, but not after PhoneGap. I've been struggling with this for a long time now. Here's the relevant code. Any help would be very much appreciated. Thanks!

$(function(){ 
    $('a#nxt1').bind('click', function(event, ui) {
        infoval();
    });

function infoval(){
    var isvalidate=$("#infofm").valid();
    if(isvalidate) {
        $.mobile.changePage('#towertop', {transition: 'slidefade'});
    } else {
        alert("Please fill in all fields on this page before proceding");
    }
};

$(document).ready( function(){ 
$("#infofm").validate({ errorPlacement: function(error, element) {} }); });

AND

<a href="" id="nxt1" data-iconpos="bottom" data-theme="a" data-icon="arrow-r">Next Step</a>

回答1:

I believe that for jQuery Mobile, you'll need to use....

$(document).on('pageinit', function(){

instead of

$(document).ready(function(){

See: http://jquerymobile.com/demos/1.2.0/docs/api/events.html

Important: Use $(document).bind('pageinit'), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event.

回答2:

My javaScript code was not being called when bundled into a phonegap app (on iOS in my case). I built a web app with multiple screens and buttons that are hidden or displayed depending on user interaction.

When using the iOS simulator bundled with XCode you can see the sourcecode of the generated web app in safari (under the "Develop" menu, developer tools have to be enabled in Safari preferences). In the source code I noticed that the all my apps html pages are merged into one and the only javascript included is from the first page (default index.html) - all other elements within the page were removed from the file. So I changed

    $(document).ready(function(){ 
       ...
    });

    $(document).on('pageinit', function(){
       ...
    });

(thanks Sparky, for your answer above) and added all the jquery js code from the following pages into index.html. As an example I added the following line to hide a div on one of the pages:

    $("#cancelButtonDiv").hide();

The code is now being executed and the methods specified on my buttons are being called properly.

来源：https://stackoverflow.com/questions/14528863/android-phonegap-jquery-validate-not-firing

标签

javascript

android

cordova

jquery-mobile

jquery-validate