0

I have a little problem here, so I have a form, inside I have 8 chekboxes in one section all are with images above them so if the user click over the image to check their specific chekboxes to .

Here is the code of my chekboxex and the script to validate them:

function logotype() {
  var group = document.newlogo.ltype;
  for (var i=0; i<group.length; i++) {
    if (group[i].checked)
      break;
  }
  if (i==group.length)
    return alert("Please select 1 to 3 Logo Types");
}
<div class="thumb1" >
  <label for="letter"><img class="img" src="images/my2.jpg"  /></label>
  <input type="checkbox" class="chk"   name="ltype[]"  id="letter" value="letter" />
  <hr>
  <p><strong>Letter Mark Logo</strong></p>
</div>
<div class="thumb1">
  <label for="emblerm"><img class="img" src="images/my3.jpg"  /></label>
  <input type="checkbox" class="chk"   name="ltype[]" id="emblerm" value="emblerm" />
  <hr>
  <p><strong>Emblerm Logo</strong></p>
</div>

As you may see the id="ltype" if i make all my checkboxes with the same id it works with validating but after this my checkboxes can't be checked from images because for="anothername" if i put ltype it makes all jujst select one field . .

So the question is: Can I somehow validate the checkboxes based on their class names so that at least 1 to three checkboxes are checked when submit?

New Logo
  • 85
  • 8
  • 2
    *"if i make all my checkboxes with the same id"* - don't do this, `id` should be unique in a document. If there are multiple elements with same `id` in a document, it might cause unexpected results... – T J Sep 29 '14 at 17:14
  • 2
    `
    ` is deprecated, use CSS `text-align: center` instead. `id`s must be unique. `document.newlogo.ltype` isn't standard, I think you meant `document.forms.newlogo.elements.ltype`. And please write clearly (e.g. use "because", not "cuz"), I fixed what I could but I found some parts unintelligible (e.g "pyt").
     – Oriol Sep 29 '14 at 17:15
  • i didn't know that guys thanks its my first time on form processing and validation. – New Logo Sep 29 '14 at 17:22

1 Answers1

2

You can use getElementsByClassName() method to access the checkboxes using classname, and validate them as follows:

function logotype() {
  var failure = true,
  count =0,
  group = document.getElementsByClassName("chk");
  for (var i=0; i<group.length; i++) {
    if (group[i].checked)
      count++;
    if(count>=3){
      failure =false;
      break;
    }
  }
  if (failure){
     alert("Please select 1 to 3 Logo Types");
     return false;
  }
}
T J
  • 42,762
  • 13
  • 83
  • 138
  • @T J one question with this code structure it brings me the alert even if i check one or three of the options when on submit and then the process goes on but the alert displays what should i do ? – New Logo Sep 29 '14 at 17:58
  • 1
    @NewLogo what do you mean "* then the process goes on but the alert displays"* - what is the process..? are you submitting a `
    `?
     – T J Sep 29 '14 at 18:00
  • @T J the form get submitted and i get the data after i click on the ok of the alert. i mean when the fields are all filled right and i click on the submit button it shows me the Please select 1 to 3 Logo Types" and after clicking ok the form get submitted as it should – New Logo Sep 29 '14 at 18:37
  • 1
    @NewLogo If you want to prevent the `
    ` submission, change your `
    ` to `
    ` and retrn `false` from the function, as shown in this [answer](http://stackoverflow.com/a/4227096/2333214).     – T J Sep 29 '14 at 19:25
  • @T J no its not the case that i want to prevent the form submission but the alert shows up even when the checkboxes are checked right sorry for my delay – New Logo Sep 29 '14 at 22:21
  • 1
    @NewLogo I think i misunderstood the question - the answer checks whether at least 3 checkboxes are checked or not... What exactly do you mean by *"so that at least 1 to three checkboxes are checked "* - doesn't make sense...what exactly do you want to do? – T J Sep 30 '14 at 05:14
  • @T J we misunderstand each other look i want at least 1 checkbox to be checked and maximum 3 of 8 can be checkable. This mean if one is checked then it should be ok , but if 4 than not this is the main idea – New Logo Sep 30 '14 at 16:34
  • Yes this is what i wanted thank you very much for your great support @T J – New Logo Sep 30 '14 at 18:39