0

複数の住所フィールドを持つフォームがあります。前のフィールドが入力されている場合にのみ、1 つのフィールドへの入力を許可したいと思います。私は jquery validate を使用しており、引き続き使用したいと考えています。これらのフィールドは実際には必須ではありませんが、最初のフィールドを除いて、残りのフィールドにギャップを残すことはできません。したがって、フィールド 3 が空白の場合、フィールド 4 にデータを含めることはできません。1 つの方法は、前のフィールドにデータが入力されたときにのみフィールドを有効にすることですが、このコンテキストでそれを行う方法がわかりません。

4

3 に答える 3

6

あなたの説明はやや不明確です。わざとフィールドを空のままにしたいという人は聞いたことがありませrequiredんoptional。

これは 2 つの部分からなる答えです。

1)オプションをおよびカスタム セレクターとdepends一緒に使用する方法を示します。そのため、ルールの適用は、別のフィールドが入力されているか空のままであるかによって異なります。:filled:blank

2) フィールドが空のままでない場合にエラーを発生させるカスタム ルールを作成する方法を示します。

最後の jsFiddle は、これら 2 つを結合します。

depends関数を使用して、requiredルールを別のフィールドに依存させることができます。

この例では、最初はすべてのフィールドが「オプション」です。ただし、それぞれが前のものに依存します。field #1が満たされている場合は、 など にfield #2なります。の代わりにカスタム セレクターを使用して、反対の をチェックすることもできます。required:blank:filled

これは、ほぼすべての状況に合わせて変更できます。

デモ: http://jsfiddle.net/Rvhmd/

jQuery :

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field2: {
                required: {
                    depends: function (element) {
                        return $("#field1").is(":filled");
                    }
                }
            },
            field3: {
                required: {
                    depends: function (element) {
                        return $("#field2").is(":filled");
                    }
                }
            },
            field4: {
                required: {
                    depends: function (element) {
                        return $("#field3").is(":filled");
                    }
                }
            }
        }
    });

});

HTML :

<form id="myform">
    <input type="text" name="field1" id="field1" />
    <input type="text" name="field2" id="field2" />
    <input type="text" name="field3" id="field3" />
    <input type="text" name="field4" id="field4" />
    <input type="submit" />
</form>

OPが要求するものを提供するためにempty、フィールドが空でない場合にエラーを発生させるカスタムメソッド/ルールが呼び出されます。

$(document).ready(function () {

    $.validator.addMethod('empty', function(value, element) {
        return (value === '');
    }, "This field must remain empty!");

    $('#myform').validate({ // initialize the plugin
        rules: {
            field: {
                empty: true  // error if field is not empty
            }
        }
    });

});

動作デモ: http://jsfiddle.net/4C2U3/

このカスタムemptyルールをdepends上記のオプションと組み合わせて、目的を達成することができます。 

        rules: {
            field: {
                empty: {
                    depends: function (element) {
                        return $("#other_field").is(":blank");
                    }
                }
            }
        }

これは、OPが望んでいるものに最も近いものです。

http://jsfiddle.net/qCJ8T/

于 2013-03-24T16:07:57.463 に答える
0

上記の私のコメントのフォローアップ。

基本的な jquery セレクターを使用すると、 .prev()トラバース関数を使用して「前の」要素を選択できます。

疑似コードの用語では、次のようなことを行うことができます

if ( anAddressTextBox.prev().val() != '' ) { // ps: again, this is pseudo-code
  // allow current text object
}

.closest()と.siblings()も見たいと思うかもしれません

一致するクラス名で上記の部分を検証して、常にフィールドのアドレス スコープ内にいることを確認します。(つまり、アドレス テキスト ボックスではない別のランダム フィールドをチェックしない)

SOコミュニティがより良いソリューションを提供できるように、html/js/jqueryコードをいくつか追加してください:)

于 2013-03-24T15:45:33.470 に答える