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()はjQuery1.7の新機能であるため、1.6.4以前を使用している場合は、に変更.on()して.bind()ください。

于 2012-06-10T18:05:46.750 に答える