0

I'm using jquery.validate.js with a multipage jquery mobile app. I'm using onclick= to validate each page/form before moving on to the next page. This works correctly in iOS and Android when accessed in the browser. But when I package with PhoneGap, the next button in my footer is dead/does nothing. I'm guessing its an issue with the onclick. I tried a couple solutions form here: PhoneGap build + jquerymobile: onclick on button does not work and here: https://forum.jquery.com/topic/jquery-mobile-on-phone-gap-for-android without success. A relevant sample of my html is below.

What do I do to make those links work with Android/PhoneGap? I'd like to keep them as href's rather than buttons.

Thanks!

<div id="info" data-role="page" data-theme="c">
<div data-role="content">

<script>
    function infoval(){ 
        if (!$("#infofm").valid()) {
            alert("Please fill in all fields on this page before proceding");
        } else {
            $.mobile.changePage('#towertop', {transition: 'slidefade'});
        }
    };
    function towertopval(){ 
        if (!$("#towertopfm").valid()) {
            alert("Please select 'Yes' 'No' or 'N/A' for each item before proceding");
        } else {
            $.mobile.changePage('#towerground', {transition: 'slidefade'});
        }
    };
</script>

<form id="infofm" encoding="multipart/form-data" encType="multipart/form-data">
<input type="text" placeholder="Your First & Last Name" class="required" name="_fid_14" id="_fid_14" />
</form>
<div data-role="footer" data-id="myfoot" data-position="fixed"><div data-role="navbar">
<ul><li></li>
<li><a href="#start" data-iconpos="bottom" data-theme="e" data-transition="pop" data-icon="back" data-rel="dialog">Start Over</a></li>
<li><a href="" data-iconpos="bottom" data-theme="a" data-icon="arrow-r" onclick="infoval();">Next Step</a></li></ul></div></div>
</div></div>

<div id="towertop" data-role="page" data-theme="c">
<div data-role="content">
<form id="towertopfm" encoding="multipart/form-data" encType="multipart/form-data">
<div data-role="fieldcontain"><p><a href="" data-reveal-id="16pop" data-animation="none">Azimuth Verification</a></p><fieldset data-role="controlgroup" data-type="horizontal"><input id="_fid_16_a" type="radio" name="_fid_16" value="Yes" class="required"/><label for="_fid_16_a">Yes</label><input id="_fid_16_b" type="radio" name="_fid_16" value="No"/><label for="_fid_16_b">No</label><input id="_fid_16_c" type="radio" name="_fid_16" value="N/A"/><label for="_fid_16_c">N/A</label></fieldset>
<p><textarea placeholder="Comments" name="_fid_17" id="_fid_17" rows="6" /></textarea></p></div>
</form>
<div data-role="footer" data-id="myfoot" data-position="fixed"><div data-role="navbar">
<ul><li><a href="#info" data-iconpos="bottom" data-theme="a" data-transition="slidefade" data-direction="reverse" data-icon="arrow-l">Previous Step</a></li>
<li><a href="#start" data-iconpos="bottom" data-theme="e" data-transition="pop" data-icon="back" data-rel="dialog">Start Over</a></li>
<li><a href="" data-iconpos="bottom" data-theme="a" data-icon="arrow-r" onclick="towertopval();">Next Step</a></li></ul></div></div>
</div></div>

<script>
$(document).ready( function(){
    $("#infofm").validate({ errorPlacement: function(error, element) {} });
    $("#towertopfm").validate({ errorPlacement: function(error, element) {} });
    $("#towergroundfm").validate({ errorPlacement: function(error, element) {} });
    $("#cabaavfm").validate({ errorPlacement: function(error, element) {} });
    $("#sigemailfm").validate({ errorPlacement: function(error, element) {} });
});
</script>

This is the order of scripts in my header:

<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile.min.js"></script>
<script type="text/javascript" src="sisyphus.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<script src="jSignature.js"></script>
<script type="text/javascript" src="date.format.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script src="phonegap.js"></script>

UPDATE: I also tried this:

<script>
    $(function(){
        $('#nxt1').click(function(){
            infoval();
        });
        $('#nxt2').click(function(){
            towertopval();
        });
    });
</script>

With this:

<div data-role="footer" data-id="myfoot" data-position="fixed"><div data-role="navbar">
<ul><li></li>
<li><a href="#start" data-iconpos="bottom" data-theme="e" data-transition="pop" data-icon="back" data-rel="dialog">Start Over</a></li>
<li><a href="" id="nxt1" data-iconpos="bottom" data-theme="a" data-icon="arrow-r">Next Step</a></li></ul></div>

With the same result - works in browser, but not after packaged with PhoneGap.

4

0 回答 0