Question

我正在开发phonegapp应用程序。我的应用程序有一个用户应填写的表单。我使用Jquery进行了内联验证。当用户点击一些必填字段＆amp;如果没有填写该字段，则会提示错误，或者如果他尝试提交表单，则所有必填字段都会出错。它按我想要的方式工作。我的问题是当用户点击后退按钮而不提交表单时，所有提示错误都在新页面中。如何在用户单击后退按钮时隐藏这些提示错误。请帮帮我。

我已将屏幕截图附加到picasa相册。在这里查看

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

这是我的代码..

<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>

Answer 1

当用户离开当前页面时，您可以隐藏表单验证元素：

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

来源：https://github.com/posabsolute/jQuery-Validation-Engine

看起来你并没有完全遵循jQuery Mobile页面约定：http://jquerymobile.com/demos/1.1.0/docs/pages/page-anatomy.html

快速示例：

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

请注意{j} 1.7时.on()是新的，因此如果您使用的是1.6.4或更早版本，请将.on()更改为.bind()。

Phonegap表单验证错误，使用backbutton隐藏

1 个答案: