7

デフォルトで無効になっている一連のテキストボックスを含むフォームがあり、各ボックスの横にあるチェックボックスを使用して有効にしています。

有効にすると、これらのテキストボックスの値は有効な数値である必要がありますが、無効にすると値は必要ありません (明らかに)。この検証を行うために jQuery Validation プラグインを使用していますが、期待どおりに動作していないようです。

チェックボックスをクリックしてテキストボックスを無効にすると、ルールに句を追加したにもかかわらず、無効なフィールド エラーが引き続き発生dependsします (以下のコードを参照)。奇妙なことに、実際に起こることは、エラー メッセージが一瞬表示されてから消えてしまうことです。

チェックボックスとテキストボックスのリストのサンプルを次に示します。

<ul id="ItemList">
<li>
    <label for="OneSelected">One</label><input id="OneSelected" name="OneSelected" type="checkbox" value="true" />
    <input name="OneSelected" type="hidden" value="false" />
    <input disabled="disabled" id="OneValue" name="OneValue" type="text" />
</li>
<li>
    <label for="TwoSelected">Two</label><input id="TwoSelected" name="TwoSelected" type="checkbox" value="true" />
    <input name="TwoSelected" type="hidden" value="false" />
    <input disabled="disabled" id="TwoValue" name="TwoValue" type="text" />
</li>
</ul>

そして、これが私が使用しているjQueryコードです

//Wire up the click event on the checkbox
jQuery('#ItemList :checkbox').click(function(event) {
    var textBox = jQuery(this).siblings(':text');
    textBox.valid();
    if (!jQuery(this).attr("checked")) {
        textBox.attr('disabled', 'disabled');
        textBox.val('');
    } else {
        textBox.removeAttr('disabled');
        textBox[0].focus();
    }
});

//Add the rules to each textbox
jQuery('#ItemList :text').each(function(e) {
    jQuery(this).rules('add', {
        required: {
            depends: function(element) {
                return jQuery(element).siblings(':checkbox').attr('checked');
            }
        },
        number: {
            depends: function(element) {
                return jQuery(element).siblings(':checkbox').attr('checked');
            }
        }
    });
});

liasp.net MVC のHtml.Checkboxメソッドを使用しているため、それぞれの隠しフィールドは無視してください。

4

8 に答える 8

11

「無視」オプション（http://docs.jquery.com/Plugins/Validation/validate#toptions）を使用するのが、これに対処する最も簡単な方法かもしれません。フォームに他に何があるかによって異なります。たとえば、無効になっている他のコントロールがあるが、何らかの理由で検証する必要がある場合は、無効になっているアイテムをフィルタリングしません。ただし、そのルートが機能しない場合は、追加のクラスを使用してフィルタリング（チェックボックスを使用した追加と削除）を行うと、目的の場所に移動できますが、簡単です。

つまり

        $('form').validate({
            ignore: ":disabled",
            ...
        });
于 2009-05-19T18:59:31.597 に答える
4

通常、これを行うときは、「依存」をスキップし、requiredjQuery Validate ルールを使用して、検証ルールとチェックボックス クリック ハンドラーの間でロジックを分割するのではなく、指定されたセレクターに基づいてチェックを処理させます。マークアップを使用して、これを達成する方法の簡単なデモをまとめました。

本当に、それはに要約されrequired:'#OneSelected:checked'ます。これにより、式が true の場合にのみ、問題のフィールドが必須になります。デモでは、ページをすぐに送信すると機能しますが、チェックボックスをオンにすると、チェックされたフィールドに入力が入力されるまでフォームを送信できません。.valid()クリック時にフォーム全体を検証する場合は、チェックボックスのクリック ハンドラーに呼び出しを配置することもできます。

(また、jQuery の素晴らしいチェーン機能を利用して、チェックボックスの切り替えを少し短縮しましたが、「キャッシュ」もtextBox同様に効果的です。)

于 2009-05-26T01:29:04.383 に答える
1

@Collin Allenの回答に続いて：

問題は、エラー メッセージが表示されているときにチェックボックスをオフにすると、エラー メッセージが消えないことです。

フィールドを無効にするときにエラーメッセージを削除することで解決しました。

Collin のデモを見て、有効化/無効化プロセスに次の変更を加えます。

jQuery('#ItemList :checkbox').click(function()
{
    var jqTxb = $(this).siblings(':text')
    if ($(this).attr('checked'))
    {       
        jqTxb.removeAttr('disabled').focus();
    }
    else
    {
        jqTxb.attr('disabled', 'disabled').val('');
        var obj = getErrorMsgObj(jqTxb, "");
        jqTxb.closest("form").validate().showErrors(obj);
    }
});
function getErrorMsgObj(jqField, msg)
{
    var obj = {};
    var nameOfField = jqField.attr("name");
    obj[nameOfField] = msg;
    return obj;
}

無効にするときに、フィールドからエラーメッセージを削除することがわかります

そして、あなたが心配しているなら$("form").validate()、しないでください！フォームを再検証するのではなく、jQuery 検証の API オブジェクトを返すだけです。

于 2010-07-14T09:26:44.723 に答える
0

バリデータープラグインを試したことがありませんが、メッセージが一瞬表示されるという事実は、ダブルバインドのように聞こえますが、バインダーをどのように呼び出しますか？関数にバインドする場合は、次のように、開始する直前にバインドを解除してみてください。

$('#ItemList :checkbox').unbind("click");
...Rest of code here...
于 2009-03-22T02:35:47.933 に答える
0

私はまったく同じ問題を抱えていました。

フォーム全体でラジオボタン変更イ​​ベントハンドラーがvalid（）を呼び出すようにすることで、これを解決しました。

完璧に動作しました。上記の他の解決策は私にはうまくいきませんでした。

于 2010-04-11T05:25:29.133 に答える
0

無効化/有効化した後にフィールドを検証すべきではありませんか?

jQuery('#ItemList :checkbox').click(function(event) {
        var textBox = jQuery(this).siblings(':text');

        if (!jQuery(this).attr("checked")) {
                textBox.attr('disabled', 'disabled');
                textBox.val('');
        } else {
                textBox.removeAttr('disabled');
                textBox[0].focus();
        }
        textBox.valid();    
});
于 2009-04-26T01:16:40.627 に答える
0

これがあなたの意図したものかどうかはわかりません...しかし、.required を .wasReq に変更しないでください (これをおそらく必要としないものと区別するためのプレースホルダーとして)、ボックスをチェックして同じことを行いますもの？チェックされていない場合、フィールドは必須ではありません。removeClass(number) を使用してエラーを解消することもできます。

私の知る限りでは、フィールドが無効になっていても、それに適用されるルールは適用されます。または、いつでもこれを試すことができます...

// Removes all values from disabled fields upon submit
$(form).submit(function() {
   $(input[type=text][disabled=disabled]).val();
});
于 2009-03-16T19:45:22.500 に答える