# Using aurelia-validation

**URL:** <https://discourse.aurelia.io/t/using-aurelia-validation/3503>\
**Category:** Help Requests\
**Created:** [May 20, 2020, 3:21pm UTC](https://discourse.aurelia.io/t/using-aurelia-validation/3503 "2020-05-20T15:21:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![TafkaMax](https://avatars.discourse-cdn.com/v4/letter/t/e5b9ba/32.png) [@TafkaMax](https://discourse.aurelia.io/u/TafkaMax)\
**Post date:** [May 20, 2020, 3:21pm UTC](https://discourse.aurelia.io/t/using-aurelia-validation/3503/1 "2020-05-20T15:21:28Z")

</div>

Hi, I’m currently working on a project where I am using aurelia-validation to check if fields are correct.

1. This is the HTML that has first the aurelia-validation controller that shows any errors
2. There are two dropdown selects that i need to validate
3. there is a submit button

```auto
<ul class="item-select-form" if.bind="_controller.errors">
            <li repeat.for="error of _controller.errors">
                ${error.message}
            </li>
        </ul>

        <form class="d-flex justify-content-around" change.delegate="_controller.revalidateErrors()">

            <div class=" form-group item-select-form">
                <label for="selectColorButton" class="">
                    <h3>Color</h3>
                </label>
                <select class="form-control" id="selectColorButton" value.bind="color"
                    change.delegate="changeSizeToDefault()">
                    <option model.bind="null"><b>Select Color</b></option>
                    <option repeat.for="itemInForm of _itemOptions | filterItemOptionsColor :size :color"
                        model.bind="itemInForm"> ${itemInForm}</option>
                </select>
            </div>

            <div class="form-group item-select-form" if.bind="color !== null">
                <label for="selectSizeButton">
                    <h3>Size</h3>
                </label>
                <select class="form-control" id="selectSizeButton" value.bind="size">
                    <option model.bind="null"><b>Select Size</b></option>
                    <option repeat.for="itemInForm of _itemOptions | filterItemOptionsSize :size :color"
                        model.bind="itemInForm"> ${itemInForm}</option>
                </select>
            </div>

            <button type="submit" class="btn btn-primary item-select-submit" id="addToCart">Add Item To Cart</button>

        </form>

```

Here is the TS class model with the constructor and injected validationcontroller and the rules.  
What am I doing wrong?

```auto
private _controller: ValidationController;
    private _itemOptions: IItemOptionFromItem[] = [];

    private size: string | null = null;
    private color: string | null = null;

    constructor(
        private itemoptionservice: ItemOptionService,
        private router: Router,
        controllerFactory: ValidationControllerFactory,
        private validator: Validator
    ) {
        //Here are the validation rules for the form
        this._controller = controllerFactory.createForCurrentScope(validator);
        this._controller.validateTrigger = validateTrigger.changeOrBlur;
        ValidationRules.ensure("color")
            .satisfies(
                () =>
                    this._itemOptions.filter(
                        (item) => item.color === this.color
                    ).length !== 0 && this.color !== null
            )
            .withMessage("Please choose product color")
            .then()
            .ensure("size")
            .satisfies(
                () =>
                    this._itemOptions.filter((item) => item.size === this.size)
                        .length !== 0 && this.size !== null
            )
            .withMessage("Please choose product size")
            .on(this);
    }

```

EDIT: I added && this.color !== null and && this.size !== null to the satisfies. Because i need to check that the property i have chosen is in the itemoptions list and secondly that the property itself is not null (unset by default)

---

<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:** [May 24, 2020, 1:38pm UTC](https://discourse.aurelia.io/t/using-aurelia-validation/3503/2 "2020-05-24T13:38:39Z")

</div>

Hi @TafkaMax , it seems that you are missing the `validate` binding behavior. It needs to be used like this: `value.bind="color & validate"`, and `value.bind="size & validate"`. The binding behavior is necessary, as it registers the binding to the validation controller. That way when `validationController.validate()` is called, the validation controller knows which bindings need to be validated. For more info, refer [the docs](http://aurelia.io/docs/plugins/validation#validate-binding-behavior).

Have fun!