How to use JavaScript for my complex validation requirements?

I am trying to limit the number of checkboxes based on the radio button choice. I have 4 radio buttons and 12 checkboxes and I want the user to be able to pick:

a minimum of 2 checkboxes and a maximum of 4 checkboxes when he selects the first radio button,
a minimum of 5 checkboxes and a maximum of 6 checkboxes when he selects the second radio button,
a minimum of 7 checkboxes and a maximum of 8 checkboxes when he selects the third radio button,
a minimum of 10 checkboxes and a maximum of 12 checkboxes when he selects the fourth radio button.

One quick idea: http://codepen.io/anon/pen/mAXwPg/?editors=1111

2 Likes

Thanks Cletus but it still doesn’t limit the check boxes allowed for each radio button.

How do you mean? The validateCheckboxes() function checks if too many or too few checkboxes have been checked depending on which radio button is checked. It then writes the validation info to the console log. See the console.log() lines in that function. You’d still have to change the function to do something useful when too few/many checkboxes have been checked. But I’m not sure exactly what you want to happen when the validation fails.

I take it that when the 5-6 radio button is selected, that you want the selection of a 7th checkbox to be refused.
Some clarifying questions need to occur though.

What happens when someone goes from 5 to 4 checkboxes. Will their attempt to deselect a checkbox be denied?

And more importantly, when no checkboxes are selected, what happens when the 5-6 radio is selected. Will five checkboxes be selected immediately upon the radio button being selected?

What happens when 6 checkboxes are selected, and the 2-3 radio option is selected? Are only the first 3 checkboxes retained?

I recommend that no denial or changes occur and that you show a validation error telling them about the problem, allowing the user to correct the problem before the form can be submitted.

2 Likes

Cletus understands what I mean but I have tried running the code and it doesn’t limit the check boxes.

Define “limit”. What are you expecting to happen?
Code runs fine for me in the latest Chrome. What browser are you using?

Is that why Cletus said:

You have not explained the full range of possibilities that a user might try and how the code is supposed to respond to them.

I am using Mozilla Firefox, the codes seems to he correct but when I select check boxes and click validate nothing happens. For example when I select the first radio button which allows a maximum of 4 check boxes to be selected and I select 5 check boxes and click validate it doesn’t show any error.

Aha! I think I see the the problem. @CletusSpuckler - I believe that you are expected to do all of the work.

@Chidozie - do you know any JavaScript, just in case Cletus is busy or otherwise engaged?

2 Likes

How would you like the validation error to be displayed, Chidozie?

Do you have any code (HTML/CSS/JS) written? Maybe it’s easier to fix it in your code directly if you do.

I’m not at a computer right now, but I believe that he’s wanting it to validate on every change, and to actively prevent actions that break the validation.

I have written the HTML and I wrote a JavaScript code to do this but it didn’t give me what I had in mind. I know the code Cletus wrote is correct I just don’t know how to insert it to make it work that what I am saying. Plus it seems new users are allowed to attach documents so I will copy out the HTML code and paste it for you to see. Thank you cletus

<div class="radio radio1">    
<label>       
<input type="radio" name="showform" id="optionradios" value="micro" checked> 
<h3 class="h3one"><span id="mystyle4">Fruit</span> <span id="mystyle3">Basket</span> Micro:&#8358;2,000</h3></div>
 
<div class="radio radio1">    
<label>       
<input type="radio" name="showform" id="optionradios" value="mini" >
<h3 class="h3one"><span id="mystyle4">Fruit</span> <span id="mystyle3">Basket</span> Mini:&#8358;3,000</h3></div> 

<div class="radio radio1">    
<label>       
<input type="radio" name="showform" id="optionradios" value="midi" >
<h3 class="h3one"><span id="mystyle4">Fruit</span> <span id="mystyle3">Basket</span> Midi:&#8358;4,500</h3></div> 

<div class="radio radio1">    
<label>       
<input type="radio" name="showform" id="optionradios" value="maxi">
<h3 class="h3one"><span id="mystyle4">Fruit</span> <span id="mystyle3">Basket</span> Maxi:&#8358;5,000</h3></div>

…end of the radio buttons…
…start of the checkboxes…

<label class="checkbox">       
<input type="checkbox"  value="Avocado" name="chk[]"> Avocado    
</label>    
<label class="checkbox"> 
<input type="checkbox"  value="Banana" name="chk[]"> Banana   
</label>
<label class="checkbox"> 
<input type="checkbox"  value="Cabbage" name="chk[]"> Cabbage    
</label>    
<label class="checkbox">       
<input type="checkbox"  value="Carrot" name="chk[]"> Carrot   
</label> 
<label class="checkbox"> 
<input type="checkbox"  value="Cucumber" name="chk[]"> Cucumber   
</label>
<label class="checkbox">       
<input type="checkbox"  value="Garden Eggs" name="chk[]"> Garden Eggs    
</label> 

<label class="checkbox">       
<input type="checkbox"  value="Green Apple" name="chk[]"> Green Apple   
</label> 
</div>

<label class="checkbox">       
<input type="checkbox"  value="Green Grape" name="chk[]"> Green Grape    
</label> 

<label class="checkbox">       
<input type="checkbox"  value="Orange" name="chk[]"> Orange    
</label> 

<label class="checkbox">       
<input type="checkbox"  value="Paw Paw" name="chk[]"> Paw Paw  
</label> 

<label class="checkbox">       
<input type="checkbox"  value="Pear" name="chk[]"> Pear    
</label> 

<label class="checkbox">       
<input type="checkbox"  value="Pineapple " name="chk[]"> Pineapple    
</label>

<label class="checkbox">       
<input type="checkbox"  value="Red Apple" name="chk[]"> Red Apple   
</label>

<label class="checkbox">       
<input type="checkbox"  value="Red Grape" name="chk[]"> Red Grape    
</label>

<label class="checkbox">       
<input type="checkbox"  value="Watermelon" name="chk[]"> Watermelon    
</label>

…end of checkboxes…

That’s the HTML code, I attached square brackets to the name of the check boxes to allow me save the selected check boxes in an array and send it to an email address. If a user reaches the maximum number of check boxes allows let other check boxes be disabled if he deselects one let the uncheked one be enable to allow him select another check box

How do i attach the HTML file so you can see it

Edit your post, highlight the code with your mouse (so it is marked blue), then hit the code button in the toolbar in the editor pane (looks like this: </>)

1 Like

Already pasted the HTML code

What’s with all the unclosed labels in the radio part?

I’m not sure it’s a good idea trying to limit the choices by disabling checkboxes. I agree with what Paul wrote in post #5, that it’s probably better to just let the user check/uncheck checkboxes freely and validate the selection before the form is posted.

Sure, you could disable all unchecked checkboxes when the current maximum number of checkboxes have been checked. But if you do that, should you also “lock” the selection for the minimum value? I mean, if the radio for 5-6 checkboxes have been selected and 5 checkboxes are currently checked, should you be allowed to uncheck one of the checked ones? Or should you be forced to check one more checkbox before you’re allowed to uncheck another one?

What should happen if you have the radio for 5-6 allowed checkboxes selected, 5 checkboxes are checked and you select the radio for 2-4 allowed checkboxes instead? That would put the form in an invalid state. Or should the radio for 2-4 options get disabled if more than 4 checkboxes have been checked? There are many things to consider here. :slight_smile:

Yes good point Cletus, the user should be the one to make his choice, Owk with that in mind how do I insert the JavaScript code you gave me to work with my HTML code. Also thanks a lot guys for your comments and efforts.