Search code examples
javascriptvalidationaurelia

Aurelia Validation - Validating multiple checkboxes or radios


I am trying to validate that at least 1 checkbox was selected using the Aurelia validator. I was assuming that using the minItems() method would be sufficient but it seems I can only make this work by a 'hack' using a hidden element pointing to my array. Does anyone know of a more simple approach to handling this?


Solution

  • When dealing with groups of radios or checkboxes it's easiest to put the validation on the group instead of each individual input element. This approach requires building a custom element for "checkbox-group" and/or "radio-group". Here's an example of a checkbox group with validation:

    checkboxes component that is compatible with validation

    <label id="color1">
      Colors 1:
      <checkbox-select items-source.bind="colors"
                       value.bind="colors1 & validate"
                       aria-labelledby="color1">
      </checkbox-select>
    </label>
    

    radio group component that is compatible with validation