HTML5 - select some required checkboxes

Question

I wrote the code here: http://jsfiddle.net/anhtran/kXsj9/8/

Users must select at least 1 option in a group. But it makes me click everything to submit the form. How to do this without javascript?

Thanks for any help :)

Answer 1

I think this html5 attribute should only determine which fields are needed. You cannot set logic to say: "at least one is required."

You will need to add custom javascript to work (and / or server side validation).

hope this helps ...

Answer 2

The ideal answer is to use the HTML5 and required attribute as part of the select element, for example:

 <form method="post" action="processForm.php"> <label for="myLanguages">What languages can you program in?</label> <br> <select id="myLanguages" multiple required> <option value="C#">C# <option value="Java">Java <option value="PHP">PHP <option value="Perl">Perl <option value="Haskell">Haskell </select> <br> <input type="submit" value="Submit"> </form> 

Yes, I know that these are not flags, but the ultimate functionality is exactly what you want. Unfortunately, neither IE 9 nor Safari 5 currently support the required attribute. However, Chrome 13 and FF 5 do. (Tested on Win 7)

Answer 3

I thought it would be possible to partially do what was after using CSS. Do not use the required attribute, but instead hide the submit button if nothing is selected.

You need to get rid of the required attributes and use CSS like this:

 input[type=submit] { display:none; } input[type=checkbox]:checked ~ input[type=submit] { display:block; } 

However, this CSS does not work on my version of Google Chrome. I asked a question about this here . It seems to work fine on my FF 3.6.

Answer 4

You cannot do this without javascript. What you can do is select the default option and set it as the selected one. But you cannot assure that the checkbox is selected when submitting the form.