0

Here is my link: http://vkacademy.in/medvanndemo/normal.html

The select subject has three checkboxes. I have included the required attribute on the first checkbox for HTML5 validation for these checkboxes.

The problem I have is the form is not grouping the all checkboxes, so that one is selected when submitted.

<form name="vk" action="" method="post"/>

Name:<input type="name" name="username" value="" required/><br/><br/>
password:<input type="password" name="password" value="" required/><br/><br/>
Please select subject:
<input  name="subject[]"  type="checkbox"  value="all" required>All Subject
<input  name="subject[]" type="checkbox"  value="science" >Science
<input  name="subject[]" type="checkbox"   value="maths">Maths<br/><br/><br/>

Please select Subject for class twelve<br/>

<input type="checkbox" name="classfivesubject[]" id="mat" value="BScTuition (Physics)" required >BScTuition (Physics)<br/>
<input type="checkbox" name="classfivesubject[]" id="mat" value="BSc Tuition (Chemistry)">BSc Tuition (Chemistry)<br/>
<input type="checkbox" name="classfivesubject[]" id="mat" value="BCA Tuition (Computer)">BCA Tuition (Computer)<br/>
<input type="checkbox" name="classfivesubject[]" id="mat" value="BCA Tuition (IT)">BCA Tuition (IT)<br/>
<input type="checkbox" name="classfivesubject[]" id="mat" value="BSc Tuition (Biology)">BSc Tuition (Biology)<br/>
<input type="checkbox" name="classfivesubject[]" id="mat" value="BSc Tuition (MicroBiology)">BSc Tuition (MicroBiology)<br/>
<input type="checkbox" name="BSc Tuition (MicroBiology)" id="mat" value="BSc Tuition (MicroBiology)">BSc Tuition (MicroBiology)
<input type="checkbox" name="BSc Tuition (Zoology)" id="mat" value="BSc Tuition (Zoology)">BSc Tuition (MicroBiology)<br/>
<input type="submit" name="submit" value="Submit"/>
</form>
worldofjr
  • 3,868
  • 8
  • 37
  • 49
mathew john
  • 163
  • 9
  • and what is the question? – Sigismundus Feb 14 '15 at 05:20
  • Among subject user select any one subject. I have given the required field for All subject only .user may select science,maths, allsubject, or all three subject but atleast any one among three.it should not be empty? how to do in hmtl5. where to give required attribute ? in three checkbox. – mathew john Feb 14 '15 at 05:29
  • possible duplicate of [How to validate the group checkbox in html5?](http://stackoverflow.com/questions/28497361/how-to-validate-the-group-checkbox-in-html5) – worldofjr Feb 14 '15 at 06:04

2 Answers2

1

There are a number of problems with your code;

1) You've self-closed the form tag. Whilst many browsers will ignore this, get rid of the self close />.

2) If you want the user to select one option from a list, such as your subject field, you should use radio buttons;

<input name="subject" type="radio" value="all" selected>All Subject
<input name="subject" type="radio" value="science">Science
<input name="subject" type="radio" value="maths">Maths

In addition to this, you can't use the required argument for checkboxes (in an array of checkboxes*) or radio button. For radio buttons, you can force a selection by using the selected argument on one of the options (usually the first) as I have done above.

3) You haven't given the same name to all the Class 5 Subject checkboxes. I assume this is just an error. Use classfivesubject[] for all of them, or just classfivesubject if you use radio buttons.

4) You are giving the same id to multiple elements. This is bad coding. An id should appear once on a page, and once only. To use styles or other features across more than one element, use a class.

<input id="mat"> <!-- use once -->
<input class="mat"> <!-- can use multiple times -->

Hope this helps.

*You can use it on just one checkbox, for example to confirm the user has accepted terms and conditions.

worldofjr
  • 3,868
  • 8
  • 37
  • 49
  • you got my concept ?is there is any way to validate the groupcheckbox because you can see my form next to subject column it contains another subject column ,so In my form there are lot subject columns here I need to use the name has array only.If i maintain the form field. has array it is easy to handle in php and my db structure also. Now you got more idea i thing so.I want this thing to be in checkbox only? or shall i user jquery or javascript? I know that clearly.since html5 is easy and supports for all browser and easy to use.again user will choose any subject so that I kept in checkbox. – mathew john Feb 14 '15 at 05:48
  • To be clear; HTML5 is **not** supported in all browsers. Safari, for example, doesn't support the `required` argument at all. – worldofjr Feb 14 '15 at 05:52
  • OK. Let me repeat this again. **If you want the user to select one option only from a list** then use radio buttons - in this case the `value` of the selected radio button is returned in the `$_POST['name']` variable (where `name` is the name given to the group of radio buttons, see in the answer). To allow the user to select two or more options, use checkboxes - you need javascript/jQuery to validate this as the form is submitted. – worldofjr Feb 14 '15 at 05:57
  • please take a note here all subject checkbox is not mandatory.among three they will choose any one.but it should be empty it has to be in checkbox only and the name of checkbox should be array. – mathew john Feb 14 '15 at 06:13
  • I suggest [this method](http://stackoverflow.com/a/901727/3899908), but there are many good answers on SO and google. – worldofjr Feb 14 '15 at 06:16
  • This is getting into the realms of a different question. Please [ask a new question](http://stackoverflow.com/questions/ask) detailing that you're looking to validate your checkboxes with jQuery or javascript. **Include the code you currently have, or have tried, in your question.** – worldofjr Feb 14 '15 at 06:26
0

There's no standard HTML5 way to do this. you can use Jquery for this kind of validation.

Deepak Kumar Padhy
  • 4,128
  • 6
  • 43
  • 79
  • Actually [HTML5](http://www.the-art-of-web.com/html/html5-form-validation/) can do this for you. The problem is no every browser can handle HTML5 – Sigismundus Feb 14 '15 at 05:37
  • @Sigismundus It won't work for an array of checkboxes unless you want specific checkboxes to be selected (such as an acceptance of Terms and Conditions). You can't validate that one of the array has been selected in HTML5. – worldofjr Feb 14 '15 at 05:40