Element: [Bug Report] Element UI form validation triggers every time when translated validation message changed

[lkmadushan]

Element UI version

2.0.11

OS/Browsers version

Chrome

Vue version

2.5.13

Reproduction Link

https://jsfiddle.net/rtb0h7z0/13/

Steps to reproduce

Every time you clicked "change message" validation triggers

What is Expected?

It shouldn't validate input field when the message changed

What is actually happening?

It validates input field every time when the message changed

[Leopoldthecoder]

This is not a bug.

The change of this.translate updates this.message because this.translate is a dependency of this.message. Similarly, the change of this.message updates this.rules. When this.rules is changed, <el-form> will validate itself using the new rules.

[lkmadushan]

@Leopoldthecoder I understood. But let’s say we want to change the validation messages based on the language. In that case every time language changed, validation triggers and messages show on the form while we don't want to show them until form filled.

Is there any workaround for this?

[wacky6]

Right now, no workaround.

Maybe add an option to configure validation on rule change behavior?

[lkmadushan]

@wacky6 Can you explain your solution bit further?

Is there any way to translate validation messages in ElementUI?

[wacky6]

I just checked the source code, there is a work around in fact. (Added three months ago)

Try clearValidate method on form or form-item. But it's not perfect: you can clear the validation message after changing the rule, but the validation will still be carried out.

I've added a custom validator to phone. Open the console, you can see the validator being called.
https://jsfiddle.net/b5g0t18r/

---

The problem comes from form's code:

watch: {
  rules() {
    this.validate();
  }
},

The problem is pretty obvious. When rules changes, the form will validate itself.

[wacky6]

Note, there is a way to perfectly hack this problem, but I strongly discourage it!

You can update rules via nested property. This avoids the watcher being triggered, because the reference to rules stays the same.

https://jsfiddle.net/4efh10fu/

I call this hack because it violates the immutable principle. In addition, Vue's reactivity design may eventually be able to detect such changes in the future (by using Proxy + wrapped getter/setter).

[lkmadushan]

@wacky6 Thank you very much man. You saved my life :) Used clearValidate method for now.

[wacky6]

@Leopoldthecoder
Maybe element should add an option to disable validate on rule change? See discussion.

[Leopoldthecoder]

We already have a PR for that. Chances are it'll be shipped with the next release.

[Vekku]

Whats the status on this. Is this shipped already?

[bpsilver]

Didn't see this in the docs, but it is in the code. You can set the validateOnRuleChange property of the form to false and it will not fire validation when the rules change.