This is a migrated thread and some comments may be shown as answers.

How to do basic validation on list of check boxes?

3 Answers 660 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Drew
Top achievements
Rank 1
Drew asked on 07 Feb 2013, 10:15 PM
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!

3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 11 Feb 2013, 09:25 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Drew
Top achievements
Rank 1
answered on 11 Feb 2013, 08:49 PM
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!
0
Petur Subev
Telerik team
answered on 13 Feb 2013, 02:47 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Drew
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Drew
Top achievements
Rank 1
Share this question
or