Группировка ошибок в jQuery Ненавязчивая проверка - PullRequest
Новая
       15

Группировка ошибок в jQuery Ненавязчивая проверка

5 голосов
/ 13 июля 2011

У меня есть 3 ряда флажков, которые пользователь должен заполнить. Проверка заключается в том, что он должен установить хотя бы один флажок в каждой строке. Поэтому я создал обязательное правило, поскольку, насколько я понимаю, требуемое правило не применяется к флажкам.

Все это прекрасно работает. Проблема состоит в том, что, поскольку каждая строка является группой, проверка заканчивается тем, что выдает 3 разных сообщения, хотя я действительно хочу только одно.

Я создал пример для jsFiddle . Поэтому, если вы просто нажмете «Отправить», вы увидите 3 разных сообщения, но я хочу только ОДИН. Есть ли способ объединить их? Я видел, что это было сделано с обычной проверкой 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>

1 Ответ

3 голосов
/ 13 июля 2011

Вы можете скрыть все сообщения, кроме одного, используя CSS. Например, используя CSS-селектор General sibling Combinator *, вы можете скрыть лишние сообщения, добавив следующий стиль ( рабочий пример для jsFiddle ): 

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

Это скроет все элементы p с классом .field-validation-error, если им предшествует другой элемент p с классом .field-validation-error (у них должен быть один и тот же родительский элемент, но они не должны быть смежными )

...