5

ユーザーが入力する必要があるチェックボックスが 3 行あります。検証は、各行で少なくとも 1 つのチェックボックスを選択する必要があることです。必須ルールはチェックボックスには適用されないことがわかっているので、必須ルールを作成しました。

これはすべてうまくいきます。問題は、各行がグループであるため、実際には 1 つだけが必要であるにもかかわらず、検証によって 3 つの異なるメッセージが表示されることです。

jsFiddle で例を作成しました。したがって、単に送信をクリックすると、3 つの異なるメッセージが表示されますが、1 つのメッセージだけが必要です。それらを組み合わせる方法はありますか？通常のjQuery検証でそれが行われるのを見てきましたが、目立たない検証では行われませんでした。

関連するコードもここに投稿していますが、jsFiddle のリンクをたどるとわかりやすいでしょう。

<script type="text/javascript">
    (function ($) {
        $.validator.unobtrusive.adapters.addBool("mandatory", "required");
    } (jQuery));
</script>
<form id="the_form" action="#" method="post">

<p>
<input type="checkbox" name="g1" data-val="true" data-val-mandatory="An answer is required for every row" value="1"/><span>A1</span>
<input type="checkbox" name="g1" data-val="true" data-val-mandatory="An answer is required for every row" value="1" /><span>A2</span>
<input type="checkbox" name="g1" data-val="true" data-val-mandatory="An answer is required for every row" value="1" /><span>A3</span>
</p>
<p>
<input type="checkbox" name="g2" data-val="true" data-val-mandatory="An answer is required for every row" value="1" /><span>B1</span>
<input type="checkbox" name="g2" data-val="true" data-val-mandatory="An answer is required for every row" value="1" /><span>B2</span>
<input type="checkbox" name="g2" data-val="true" data-val-mandatory="An answer is required for every row" value="1" /><span>B3</span>
</p>
<p>
<input type="checkbox" name="g3" data-val="true" data-val-mandatory="An answer is required for every row" value="1" /><span>C1</span>
<input type="checkbox" name="g3" data-val="true" data-val-mandatory="An answer is required for every row"  value="1"/><span>C2</span>
<input type="checkbox" name="g3" data-val="true" data-val-mandatory="An answer is required for every row"  value="1"/><span>C3</span>
</p>

<p class="field-validation-error" data-valmsg-for="g1" data-valmsg-replace="true"></p>
<p class="field-validation-error" data-valmsg-for="g2" data-valmsg-replace="true"></p>
<p class="field-validation-error" data-valmsg-for="g3" data-valmsg-replace="true"></p>    

<input type="submit" value="Ok" />

</form>
4

1 に答える 1

3

CSS を使用して、1 つを除くすべてのメッセージを非表示にすることができます。あなたの例では、一般的な兄弟コンビネーターCSS セレクターを使用して、次のスタイルを追加することで余分なメッセージを非表示にすることができます ( jsFiddle の作業例)。

p.field-validation-error ~ p.field-validation-error { display: none }

これにより、クラス i を持つ別の要素が前にある場合、クラス i を持つすべてのp要素が非表示になります (同じ親を持つ必要がありますが、隣接している必要はありません)。.field-validation-errorp.field-validation-error

于 2011-07-13T12:33:54.533 に答える