Question

I have seen a couple of other posts with the same question but couldn’t get the solution to work for me so I’m posting my own question.

Let me preface this by saying I’m new to JQuery and MVC. I have 3 checkboxes, and I need to ensure at least one of them is checked. I have something that is working using a Jquery custom validation. But it is displaying 3 messages in a Validation Summary. I want it to display only one message, and if possible not in a validation summary. How could I achieve this?

html code

<label for="river1">river1</label>
<input checked="checked" class="checkbox" data-val="true" data-val-required="The     river1 field is required." id="river1" name="river1" type="checkbox" value="true" />
<input name="river1" type="hidden" value="false" /><br />

<label for="river2">river2</label>
<input checked="checked" class="checkbox" data-val="true" data-val-required="The river2 field is required." id="river2" name="river2" type="checkbox" value="true" />
<input name="river2" type="hidden" value="false" /><br />

<label for="river3">river3</label>
<input checked="checked" class="checkbox" data-val="true" data-val-required="The river3 field is required." id="river3" name="river3" type="checkbox" value="true" />
<input name="river3" type="hidden" value="false" /><br />

JQuery

$.validator.addMethod("checkbox", function (value, element) {
  return $('.checkbox:checked').length > 0;
  }, 'At least one river must be selected.');

Answer 1

Working demo http://jsfiddle.net/RGUTv/

Updated – 12 Jan 2015 => http://jsfiddle.net/r24kcvz6/ CDN was cahnged http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js – you can replicate the behaviour by deselcting all the checkboxes and clicking on the submit button.

• http://jqueryvalidation.org/#latest-files-on-jsdelivr-cdn-%28hotlinking-welcome%29:

code

$.validator.addMethod('require-one', function(value) {
    return $('.require-one:checked').size() > 0;
}, 'Please check at least one box.');

var checkboxes = $('.require-one');
var checkbox_names = $.map(checkboxes, function(e, i) {
    return $(e).attr("name")
}).join(" ");

$("#itemForm").validate({
    groups: {
        checks: checkbox_names
    },
    errorPlacement: function(error, element) {
        if (element.attr("type") == "checkbox") error.insertAfter(checkboxes.last());
        else error.insertAfter(element);
    }
});

html

<form name="itemForm" id="itemForm" method="post">

<label for="river1">river1</label>
<input checked="checked" data-val="true" data-val-required="The     river1 field is required." id="river1" name="river1" type="checkbox" value="true" class="require-one" />
<input name="river1" type="hidden" value="false" /><br />

<label for="river2">river2</label>
<input checked="checked" data-val="true" data-val-required="The river2 field is required." id="river2" name="river2" type="checkbox" value="true" class="require-one" />
<input name="river2" type="hidden" value="false" /><br />

<label for="river3">river3</label>
<input checked="checked" data-val="true" data-val-required="The river3 field is required." id="river3" name="river3" type="checkbox" value="true" class="require-one" />
<input name="river3" type="hidden" value="false" /><br />

<input type="submit" />
</form>

Image if you un-tick the validation will trigger