0

私はこの状況に問題があります (http://jsfiddle.net/LFG8G/)。私のモバイル ページには、一連の値 (私の例では 01,02,03) を持つ選択メニュー要素と、折りたたみ可能なコンテンツ ブロック内の他の一連のコントロールがあります。

フォームは次のようになります。

<div data-role="page" id="pagina">
    <form action="http://www.google.com" method="get" id="form1">
        <div data-role="content">
            <select name="myOption" id="myOption" data-native-menu="false">
                <option value="">&nbsp;</option>
                <option value="01">Value 01</option>
                <option value="02">Value 02</option>
                <option value="03">Value 03</option>

            </select>
            <input type="submit" data-role="button" value="Validate" />
            <div data-role="collapsible">
                <h3>Other fields</h3>
                <div>
                    <div data-role="fieldcontain">
                        <label for="f1"><strong>Field 1</strong></label>
                        <input type="text" name="f1" id="f1" />
                    </div>
                    <div data-role="fieldcontain">
                        <label for="f2"><strong>Field 2</strong></label>
                        <input type="text" name="f2" id="f2" />
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

データをサーバーに送信する前にフィールドを検証する必要があり、jquery 検証プラグインを使用しました。

特定のオプション メニュー (項目 01) を選択すると、コンテンツ ブロックのフィールドに入力する必要があります。

このためのルールを作成しましたが、ボタンを押して検証するときに、コンテンツがユーザーに表示されない場合、検証コードは実行されません。

JavaScript は次のようになります。

    $(document).live('pageshow', function (event, ui) {
        $('#form1').validate({
            ignore:'',
            rules: {
                myOption: {
                    required: true
                },
                f1: {
                    required: {

                        depends: function (el) {
                            if ($('#myOption').val() == "01") {
                                return true;
                            } else {
                                return false;
                            }
                        }
                    }
                },
                f2: {
                    required: {

                        depends: function (el) {
                            if ($('#myOption').val() == "01") {
                                return true;
                            } else {
                                return false;
                            }
                        }
                    }
                }
            }
        });
    });
4

1 に答える 1

1

デフォルトでは、検証プラグインは隠しフィールドを検証しません。あなたがする必要があるのは、検証呼び出しにそれをオフにするオプションを追加することです:

$('#form1').validate({
   ignore:'',
   //your other options
});

それはそれについてです。ここで動作することを確認してください： http://jsfiddle.net/ryleyb/LFG8G/1/

于 2012-12-12T16:21:47.977 に答える