Geek Answers Handbook

Grouping bugs in jQuery Unobtrusive validation

I have 3 rows of checkboxes that the user must fill out. The check is that he must select at least one check box in each row. Therefore, I created a mandatory rule, because, as I understand it, the required rule does not apply to checkboxes.

All of this works great. The problem is that since each line is a group, the check ends up giving 3 different messages, although I really really want them.

I created a jsFiddle example . Therefore, if you just click the "Send" button, you will see 3 different messages, but I want only one message. Is there a way to combine them? I saw this with regular jQuery validation, but not with unobtrusive validation.

I also post the relevant code here, but it's probably easier to see if you are following the jsFiddle link.

<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>
+5
source share
1 answer

Using CSS, you can hide all but one message. For your example, using the CSS selector for the sibling collector, you can hide the extra messages by adding the following style ( working example in jsFiddle ):

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

This will hide all elements pwith the class .field-validation-errorif they are preceded by another element pwith the class .field-validation-error(they must have the same parent element, but they must not be adjacent)

+3
source

More articles:


All Articles