Home/ Questions/Q 8048985
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T06:39:12+00:00

I’m working on phonegapp application. My application has a form which user should fill.I

  • 0

I’m working on phonegapp application. My application has a form which user should fill.I have used inline validation using Jquery. when user clicked some required field & didn’t fill the field it will prompt the error or if he try to submit the form all the required fields will be given errors. It works as i want. My problem is when user clicked back-button without submitting the form, all the prompted errors are in the new page.How can i hide those prompted errors when user clicked back-button.
please help me.

I have attached screen shots to picasa-album. check it in here

https://picasaweb.google.com/103544813681982438507/PhonegapApp

Here goes my code..

<html>

<form id="formID"  method="post" action="submit.action">

    <ul data-role="listview" data-inset="true" data-theme="a">


        <li ><div data-role="fieldcontain">
            <label for="address">Address</label>
            <input type="hidden" name="address" /></div>

            <label for="street">Street:</label>
            <input type="text" name="street" id="street" value="" class="validate[required] text-input" data-prompt-position="topLeft:50" data-prompt-position="top:60"/>


            <label for="suburb">Suburb</label>
            <input type="text" name="suburb" id="suburb" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/>
            <label for="town">Town</label>
            <input type="text" name="town" id="town" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/>
            <label for="district">District</label>
            <input type="text" name="district" id="district" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/></li>

        <li>
        <div data-role="fieldcontain">
        <label for="date">Date</label>
        <input value="" class="validate[required] text-input datepicker" type="text" name="date" id="date" data-prompt-position="topLeft:50" /></div></li>
        <li>
        <div data-role="fieldcontain">
        <label for="owner_name">xxxxxxxx</label>
        <input type="text" name="xxxxx" id="xxxxx" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/></div></li>

        <li>
        <div data-role="fieldcontain">
        <label for="xxxxxx">xxxxxxxxxxxx</label>
        <input type="text" name="xxxxxxxxxx" id="xxxxxxxxxxx" value=""/></div>
        </li>

        </ul>
     <div data-role="fieldcontain">
     <button type="submit" name="save" id="save" data-theme="a"  value="Save" class="submit"/></div>

    </form>
    </div></div>

     <script type="text/javascript"> 

//Form Validating.................................................
         jQuery(document).ready(function(){
        // binds form submission and fields to the validation engine
        jQuery("#formID").validationEngine({autoHidePrompt:true});          
        $( ".datepicker" ).datepicker();


        });
</script>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can hide the form validation elements when a user navigates away from the current page:

    $(document).on('pagehide', function () {
    $('#formID').validationEngine('hideAll');
});

    Source: https://github.com/posabsolute/jQuery-Validation-Engine

    It doesn’t look like you’re quite following the jQuery Mobile page convention: http://jquerymobile.com/demos/1.1.0/docs/pages/page-anatomy.html

    Quick Example:

    <body>
    <div data-role="page">
        <div data-role="header>...</div>
        <div data-role="content">...</div>
        <div data-role="footer">...</div>
</body>

    Note that .on() is new as of jQuery 1.7 so if you’re using 1.6.4 or older, change .on() to .bind().

    • 0