1

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

我已将屏幕截图附加到 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>
4

1 回答 1

2

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

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

请注意，这.on()是 jQuery 1.7 的新功能，因此如果您使用的是 1.6.4 或更早版本，请更改.on()为.bind().

于 2012-06-10T18:05:46.750 回答