11

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.');
Filburt
  • 17,626
  • 12
  • 64
  • 115
gswanson
  • 372
  • 2
  • 3
  • 13

1 Answers1

15

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.

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

enter image description here

Tats_innit
  • 33,991
  • 10
  • 71
  • 77
  • It works great, with one small issue. For some reason the errorPlacement code is not working on my page. The error message is not inserted into the page. However it is working perfectly in JSFiddle. Thanks! – gswanson Jul 16 '12 at 23:01
  • @gswanson Glad it helped `:)` 2 things - **1)** in the code above I have my **Form** `id` different i.e. in your case it will be your form id **2)** dont forget to src your validation like this `` hope it helps – Tats_innit Jul 16 '12 at 23:04
  • 1
    I'm showing a validation summary, and i have 4 checkboxes, so it's showing 'Please check at least one box' 4 times. Is there any way to limit that to just once? – mnsr Sep 14 '12 at 04:17
  • @rudeovskizebear yep `:)` here you go fits your need - http://jsfiddle.net/HCs2e/ if you click submit button it wiil do a check for only one checkbox now. – Tats_innit Sep 14 '12 at 04:25
  • Thanks. But i actually meant the number of times the error comes up. I can't show you on fiddle as it's mvc validationsummary specific. but as i have 4 checkboxes, it seems to show the error message 4 times instead of just once – mnsr Sep 14 '12 at 04:32
  • @rudeovskizebear No worries `:)` flick me an online demo might be in some proxy but safe site `:)` I might be able to help you out. else the demo above should help to show only one error message. – Tats_innit Sep 14 '12 at 04:34
  • I unfortunately don't have an online demo. I guess all i need to know is how to break the loop or how to stop it continuing through all 4 checkboxes after it knows $('.require-one:checked').size() == 0. – mnsr Sep 14 '12 at 04:49
  • The JSFiddle fails if only some of the checkboxes are checked (not all, not none) with an error starting *Shell form does not validate*. Not sure yet if this is a JSFiddle issue or a problem with your code. – Eric J. Nov 19 '12 at 23:45
  • @EricJ. Oh thanks bruv, `:)` Glad I had the demo Image as a proof of work, seems jsfiddle wonking around, will test it shortly. – Tats_innit Nov 20 '12 at 01:26
  • Does anyone know why this seems completely broken now? I can't get any of this to work at either of the two jsfiddle links. – Jonathan Wood Jan 11 '15 at 23:01
  • Update working version: @JonathanWood Here you go: http://jsfiddle.net/r24kcvz6/ CDN was changed to : `http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js` Hope this rocks it for you `:)~ – Tats_innit Jan 12 '15 at 01:54
  • 1
    Thanks for coming back this much later and updating that. :) – Jonathan Wood Jan 12 '15 at 03:02
  • No worries `:)` @JonathanWood Thanks to you bruv, for pointing that, pleasure of fixing was all mine! – Tats_innit Jan 12 '15 at 03:24