How to do basic validation on list of check boxes?

[Drew]

hi,

If I have a <ul> made up of checkboxes of the same name (to prompt the user to select more then one choice via checkbox), how can I validate they did check off at least one option?

I tried putting the 'required' attribute in both the ul level and the input level... it either doesn't do anything, or it requires the user to check off every single check box (instead of just one or more).

Here's the HTML (this works fine with Radio buttons and Kendo BTW, you can change the type to RadioButton and see. but as checkbox, it breaks)

<form> 
   <!-- in this case, I set required at the ul level !-->
   <ul required="required" validationMessage="You must enter a gender">
      <li>
        <input id="male" name="mf" type="checkbox" value="Male" />
        <label  for="male">Male</label>
      </li>
      <li>
        <input id="female" name="mf"  type="checkbox" value="Female" />
        <label for="female">Female</label>
      </li>
    </ul>
   <!-- in this case, I set it at the input level -->
   <ul required="required" validationMessage="You must enter a gender2">
      <li>
        <input id="male2" name="mf2" type="checkbox" value="Male2" required />
        <label  for="male">Male2</label>
      </li>
      <li>
        <input id="female2" name="mf2" type="checkbox" value="Female2" required />
        <label for="female">Female2</label>
      </li>
    </ul>
   <input type="submit" value="submit">
  </form>

thanks!

[Petur Subev]

Hello Drew,

Checkboxes by nature are optional and not required. You can use the submit event to perform custom validation and if the number of the checked checkboxes is less than one prevent the submitting.

http://jsbin.com/oxetun/2/edit


All the best,
Petur Subev
the Telerik team

[Drew]

thanks - that works great. but what about radio buttons? (I just discovered this issue now)

If you use the above example, but replace with 'radio' - it works fine in forefox (with & without kendo).

Adding kendo, it only forces you to enter a value in firefox (using FF validation, not kendo).. but in IE for example where the HTML5 required attribute does not work, and Kendo is supposed to, it does not force it to be required at all and posts to the server.

How can I make a radio choice required in kendo validation? Again, you can see this doesn't work using the exact above code but where type='radio'

thanks!

[Petur Subev]

Hello Drew,

I am not able to reproduce such behavior. Check the updated fiddle 

http://jsbin.com/oxetun/4/edit


I tried it with all the major browsers and it works the same.

Kind regards,
Petur Subev
the Telerik team