# How to validate multiple checkboxes

**URL:** <https://discourse.aurelia.io/t/how-to-validate-multiple-checkboxes/5322>\
**Category:** vNext\
**Created:** [December 11, 2023, 3:01pm UTC](https://discourse.aurelia.io/t/how-to-validate-multiple-checkboxes/5322 "2023-12-11T15:01:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [December 11, 2023, 3:01pm UTC](https://discourse.aurelia.io/t/how-to-validate-multiple-checkboxes/5322/1 "2023-12-11T15:01:01Z")

</div>

Say I have an object like this:

```auto
this.inputs = [
  { value: 1, text: '1', checked: false },
  { value: 2, text: '2', checked: false }
  { value: 3, text: '3', checked: false }
]

```

And add it the my view like this.

```auto
<div repeat.for="input of inputs">
  <input type="checkbox" id="checkbox-${$index}"
    checked.bind="input.checked" change.trigger="onChange()">
  <label for="checkbox-${$index}">
    ${input.text}
  </label>
</div>

```

How do I validate the `aurelia` way?

Here I am creating a rule, that should check if at least one of the entries in the `inputs` array is checked.

```auto
validationRules
      .on(this)
      .ensure('inputs')
      .satisfies(() => this.inputs.some(input => input.checked))

```

How do I use the `& validate` binding behaviour here?

In my `onChange` function I can call this:

```auto
const result = await this.validator.validate()

```

But it seems like my rule is just being ignored.

---

<div class="post-metadata">

**Author:** ![dwaynecharrington](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dwaynecharrington/32/11_2.png) [@dwaynecharrington](https://discourse.aurelia.io/u/dwaynecharrington)\
**Post date:** [December 12, 2023, 2:20am UTC](https://discourse.aurelia.io/t/how-to-validate-multiple-checkboxes/5322/2 "2023-12-12T02:20:34Z")

</div>

Hi Ivan,

You were close. But, the issue appears to most likely be caused by the lack of `validate` in your HTML. Notice on the `checked.bind` attribute I’ve added in the `validate` binding behaviour.

```auto
<div repeat.for="input of inputs">
  <input type="checkbox" id="checkbox-${$index}"
    checked.bind="input.checked & validate" change.trigger="onChange()">
  <label for="checkbox-${$index}">
    ${input.text}
  </label>
</div>

```

If this doesn’t sort out the issue, let me know.

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [December 12, 2023, 12:12pm UTC](https://discourse.aurelia.io/t/how-to-validate-multiple-checkboxes/5322/3 "2023-12-12T12:12:46Z")

</div>

Thank for the reply Dwayne. Unfortunately adding `checked.bind="input.checked & validate"` does not seem to be changing things.

---

<div class="post-metadata">

**Author:** ![ivan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ivan/32/2022_2.png) [@ivan](https://discourse.aurelia.io/u/ivan)\
**Post date:** [December 12, 2023, 12:25pm UTC](https://discourse.aurelia.io/t/how-to-validate-multiple-checkboxes/5322/4 "2023-12-12T12:25:02Z")

</div>

I managed to get it working. Not sure if this is the proper way or just a hack.

Instead of defining the rule like this:

```auto
validationRules
      .on(this)
      .ensure('inputs')
      .satisfies(() => this.inputs.some(input => input.checked))

```

I changed it to this:

```auto
this.inputs.forEach(input => {
      validationRules
        .on(input)
        .ensure('checked')
        .satisfies(() => this.inputs.some(d => d.checked === true))
    })

```

And also added `checked.bind="input.checked & validate` to the html as @dwaynecharrington suggested.

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [December 12, 2023, 6:58pm UTC](https://discourse.aurelia.io/t/how-to-validate-multiple-checkboxes/5322/5 "2023-12-12T18:58:02Z")

</div>

Glad that you have found a working solution.

Here is another approach that depends on encapsulating the parts that depend on the collection to a different CE, and applying the `validate` BB on the binding of that CE. This keeps the validation rules simpler.

Here is an [SB project](https://stackblitz.com/edit/discourse-5322-how-to-validate-multiple-checkboxes?file=index.ts,src%2Fmy-app.ts,src%2Fmy-app.html,package.json) to demonstrate that.