# Aurelia-validation detaches custom elements

**URL:** <https://discourse.aurelia.io/t/aurelia-validation-detaches-custom-elements/629>\
**Category:** Help Requests\
**Created:** [January 11, 2018, 4:28pm UTC](https://discourse.aurelia.io/t/aurelia-validation-detaches-custom-elements/629 "2018-01-11T16:28:17Z")\
**Posts on this page:** 5\
**Page:** 1

<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:** [January 11, 2018, 4:28pm UTC](https://discourse.aurelia.io/t/aurelia-validation-detaches-custom-elements/629/1 "2018-01-11T16:28:17Z")

</div>

I am trying to use `aurelia-validation` for client-side validation. Though the client-side validation works quite well, it forces reevaluation of the custom elements in the view. For example, a typical flow is as follows (the order in which the custom-elements are `detached`/“`unbind`ed” may differ from time to time):

```
validation starting
custom-element#1 detached
custom-element#2 detached
custom-element#3 detached
custom-element#2 unbind
custom-element#3 unbind
custom-element#1 unbind
validation ended
custom-element#1 bind 
custom-element#2 bind
custom-element#1 attached
....

```

Naturally, re-activating the custom elements means also getting the data from the server which are needed in-order to render the elements in a meaningful way (for example, options in a dropdown, or items in a list, and so on).

Some more detail about the application: The validation rules are defined on server side (WebAPI), and an endpoint can deliver the rules for a “Entity” type. These rules are then translated to `aurelia-validation` rules on client-side. And then it is simple matter of using those rules with my target entity object (which can be of any “Entity” type, depending on the scenario; naturally rules are fetched accordingly). The example code looks like below:

```
this.clientRules = this.ruleAdapter.toAureliaRules(validationRules);
this.validationController.addObject(this.targetEntity, this.clientRules);

// and finally invoke validate when required
this.validationController.validate()

```

Please note that `targetEntity` is being used by the custom elements as well.

Thinking the `targetEntity` is being modified during `validate`, I also tried with following code:

```
const dummyEntity = JSON.parse(JSON.stringify(this.entity));
this.validationController.validate({ object: dummyEntity, rules: this.clientRules });
// naturally, while trying this code I removed the addObject call

```

However, this too didn’t work ☹

I am not sure how to isolate the problem and look for the root cause. I have posted [this question in StackOverflow](https://stackoverflow.com/questions/48210959/aurelia-validation-detaches-custom-elements) as well. Any suggestion in either of these two places would be really great.

---

<div class="post-metadata">

**Author:** ![thinkOfaNumber](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/thinkofanumber/32/90_2.png) [@thinkOfaNumber](https://discourse.aurelia.io/u/thinkOfaNumber)\
**Post date:** [January 11, 2018, 11:14pm UTC](https://discourse.aurelia.io/t/aurelia-validation-detaches-custom-elements/629/2 "2018-01-11T23:14:37Z")

</div>

Hi!

I haven’t come across this behaviour - that’s not to say it isn’t a bug, but I can’t tell from the code you’ve posted.

My thought as I was reading was that you were modifying targetEntity in the validation rules - then I see you’ve tried to rule that out. What exactly was the result after “deep copying” to the dummy?

Can you reproduce this result with a small targetEntity (or subset of it)? Can you try writing some of your validation rules the “usual” way without creating them from the server? i.e.

```
ValidationRules.ensure((e: EntityType) => e.title).required().minLength(3).on(this.targetEntity);

```

If you can reproduce it like this with a contrived entity, it might help find out what rule is causing the issue.

I assume your code is private/commercial otherwise you would have posted some more?

hope this helps!

---

<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:** [January 12, 2018, 9:00am UTC](https://discourse.aurelia.io/t/aurelia-validation-detaches-custom-elements/629/3 "2018-01-12T09:00:14Z")

</div>

@thinkOfaNumber Thank you for your reply.

To answer your questions:

- The result is exactly same even after trying with the `dummyEntity` (deeply copied).

- I tried with a simple rule application as below. However the validation itself didn’t work.

```auto
ValidationRules.ensure("Name").required().on(this.targetEntity); 

// followed by validate() on submitting the form
this.validationController.validate() 

```

- When i tried the old style such as shown below, the validation worked, but with re-activation of custom-elements.

```auto
this.clientRules = ValidationRules.ensure("Name").required().rules;
this.validationController.addObject(this.targetEntity, this.clientRules);

```

The result of the last attempt was expected because the following line of code (from my original post)

```javascript
this.ruleAdapter.toAureliaRules(validationRules);

```

does exactly the same. The `validationRules` is a misnomer here, this should be called more `validationSpecification` (whether a property is required or not, if there is any associated regex or not etc.). The `ruleAdapter.toAureliaRules` simply checks for those attributes in the validation specification and applies usual aurelia-validations using `ensure`, `required`, `matches`, `minLength` etc.

There is another thing that I tried is to not removing the `submit.delegate` on my form and rely on `click.delegate` of the submit button instead (`[type="button"]`), as I thought (??!!) submitting the form is forcing re-activation. But that too didn’t stop the re-activation.

And finally, you are right that I am not at liberty to post the actual code (it might also be confusing).

---

<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:** [January 12, 2018, 9:38am UTC](https://discourse.aurelia.io/t/aurelia-validation-detaches-custom-elements/629/4 "2018-01-12T09:38:00Z")

</div>

Sharing another finding if it helps. During debugging it seemed that the custom elements were detached even before starting the validation, that is before the control reaches [this line](https://github.com/aurelia/validation/blob/master/src/validation-controller.ts#L217). Then is it possible that the root cause lies elsewhere?

---

<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:** [January 12, 2018, 10:51am UTC](https://discourse.aurelia.io/t/aurelia-validation-detaches-custom-elements/629/5 "2018-01-12T10:51:17Z")

</div>

Sorry. My bad 😛 it has indeed nothing to do with aurelia-validation. The solution was to change a `if.bind` to `show.bind`😂