Using aurelia-validation

Help Requests
1

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
<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?

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)

1 Like
2

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.

Have fun!

1 Like