1

I have 2 checkbox fields and only one of them have to be required (the first or the second)

How can I show an error message only if the 2 checkboxes are not selected.

It is possible to do that with prototype ? or have I to search a solution with jQuery ?

Edit: enter image description here

The user have to choose one or many option(s) from "Checkbox group 1" or "Checkbox group 2", but not options from the 2 groups. Only one group have to be selected

Edit2: for info I'm using https://amasty.com/customer-attributes.html and I want to to customise the generated form...

And here is the generated code of My form fields :

<fieldset id="amcustomerattr66" class="amcustomerattr">
<span class="field-row" id="checkbox_group1">
<label for="checkbox_group1">Checkbox group1</label><div style="clear: both;"></div>
<div class="amorderattr_img_checkbox" style="float: left; clear: none; padding-right: 4px;"><div><input type="checkbox" class="" name="billing[amcustomerattr][checkbox_group1][]" id="checkbox_group1___30" value="30">&nbsp;Option 1</div></div><div class="amorderattr_img_checkbox" style="float: left; clear: none; padding-right: 4px;"><div><input type="checkbox" class="" name="billing[amcustomerattr][checkbox_group1][]" id="checkbox_group1___31" value="31">&nbsp;Option 2</div></div><div class="amorderattr_img_checkbox" style="float: left; clear: none; padding-right: 4px;"><div><input type="checkbox" class="" name="billing[amcustomerattr][checkbox_group1][]" id="checkbox_group1___32" value="32">&nbsp;Option 3</div></div><input type="hidden" class="" name="amcustomerattr[checkbox_group1][]" id="checkbox_group1___0" value=""><div style="clear: both;"></div><div style="padding: 4px;"></div></span>
<script type="text/javascript">
   var checkbox_group1ElementControl = {
     selectAll: function() { 
         var sel = $("checkbox_group1");
         for(var i = 0; i < sel.options.length; i ++) { 
             sel.options[i].selected = true; 
         } 
         return false; 
     },
     deselectAll: function() {
         var sel = $("checkbox_group1");
         for(var i = 0; i < sel.options.length; i ++) { 
             sel.options[i].selected = false; 
         } 
         return false; 
     }
  }

</script><span class="field-row" id="checkbox_group2">
<label for="checkbox_group2">Checkbox group2</label><div style="clear: both;"></div>
<div class="amorderattr_img_checkbox" style="float: left; clear: none; padding-right: 4px;"><div><input type="checkbox" class="" name="billing[amcustomerattr][checkbox_group2][]" id="checkbox_group2___33" value="33">&nbsp;Option 4</div></div><div class="amorderattr_img_checkbox" style="float: left; clear: none; padding-right: 4px;"><div><input type="checkbox" class="" name="billing[amcustomerattr][checkbox_group2][]" id="checkbox_group2___34" value="34">&nbsp;Option 5</div></div><input type="hidden" class="" name="amcustomerattr[checkbox_group2][]" id="checkbox_group2___0" value=""><div style="clear: both;"></div><div style="padding: 4px;"></div></span>
<script type="text/javascript">
   var checkbox_group2ElementControl = {
     selectAll: function() { 
         var sel = $("checkbox_group2");
         for(var i = 0; i < sel.options.length; i ++) { 
             sel.options[i].selected = true; 
         } 
         return false; 
     },
     deselectAll: function() {
         var sel = $("checkbox_group2");
         for(var i = 0; i < sel.options.length; i ++) { 
             sel.options[i].selected = false; 
         } 
         return false; 
     }
  }

</script>







<script type="text/javascript">
   var fav_colorElementControl = {
     selectAll: function() { 
         var sel = $("fav_color");
         for(var i = 0; i < sel.options.length; i ++) { 
             sel.options[i].selected = true; 
         } 
         return false; 
     },
     deselectAll: function() {
         var sel = $("fav_color");
         for(var i = 0; i < sel.options.length; i ++) { 
             sel.options[i].selected = false; 
         } 
         return false; 
     }
  }

</script><span class="field-row" style="display: none;">
<label for="company_name">Name of the company</label><div style="clear: both;"></div>
<input id="company_name" name="billing[amcustomerattr][company_name]" value="" class=" input-text" type="text">
<div style="padding: 4px;"></div></span>
<span class="field-row" style="display: none;">
<label for="company_specialization">Company specialization</label><div style="clear: both;"></div>
<textarea id="company_specialization" name="billing[amcustomerattr][company_specialization]" class=" textarea" rows="2" cols="15"></textarea><div style="padding: 4px;"></div></span>
</fieldset>
3
+50

Let's assume you have the two checkboxes like this:

<input type="checkbox" name="my_checkbox[1]" value="1" />
<input type="checkbox" name="my_checkbox[2]" value="2" />

You can use the default validate-one-required-by-name class to let the default prototype validation validate one required option:

<input type="checkbox" name="my_checkbox[1]" value="1" class="validate-one-required-by-name" />
<input type="checkbox" name="my_checkbox[2]" value="2" class="validate-one-required-by-name" />

Please note that the name of the input is important. The name must be arrays like in my example for the validation to work properly.

In your case you will have to add that class to the 5 inputs.

Also, to be able to use the validation properly you need to add that small JS after your form:

<script type="text/javascript">
//<![CDATA[
    var myCustomForm= new VarienForm('custom-form');
//]]>
</script>

Where custom-form is the id of your <form> element.

  • Thank you Raphael, the issue is always present, I have edited my question with an image and more description. I hope that it's better fo a solution now – Bizboss Sep 29 '16 at 15:51
  • @Bizboss please post the code that displays those checkboxes please – Raphael at Digital Pianism Sep 29 '16 at 15:51
  • @ Raphael please see my last edit – Bizboss Sep 29 '16 at 18:59
  • @Bizboss I've edited my answer ;) – Raphael at Digital Pianism Sep 30 '16 at 7:40
  • @ Raphael have you tested the edit solution ? I have tested it and it always doesn't works as expected. – Bizboss Oct 4 '16 at 11:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.