vue.js - Vuelidate - How To Validate Checkboxes at the same time?

Question

I have a form that includes 5 checkboxes total. Here is my logic;

If MainCheck is true -> AllCheck is also true, other 3 of them is false. -> If the other three of them is true at the same time that means all of them are selected, that's why AllCheck becomes true and the others turn to false again... (CheckA, CheckB and CheckC)

But here is the deal...

Let's say the user checks the MainCheck, it gives them 4 more checboxes to see. (If MainCheck is not checked, then they are not allowed to see the other 4 checkboxes.)

The user may want to check RadioA and RadioC and not RadioB so they may uncheck the RadioAll. My issue starts here.

I want to use Vuelidate to validate these 3 forms. In a way, I settled on how logic would work. But I don't know how to validate checkboxes and I need your help at this point.

validations(){
  if(this.MainCheck && !this.AllCheck){
     return {
    CheckA, CheckB and CheckC validations needed to be here 
    because the user didn't select the AllCheck so he/she wants to select one ore two of the checkboxes, 
    not the three of them together.
  }
}
  else if(this.MainCheck && this.AllCheck){
    return {
    This means that I don't need to validate the CheckA, B and C 
    because the user already select the AllCheck...
  }
}
   }

So my validation should control the three checkboxes. There may be checked only one checkbox, that's okay, or there may be checked two checkboxes (A and B, A and C or B and C). But if AllCheck is not checked and none of the three others are checked, then I need an error message that says "You haven't checked AllCheck and also you haven't checked any other options. You need to select at least one of them.)

How do I do that?

question from:https://stackoverflow.com/questions/65935139/vuelidate-how-to-validate-checkboxes-at-the-same-time

Answer 1

Waitting for answers