validation error message order

[erguotou520]

vue & vue-validator version

vue: 1.0.24 vue-validator: 2.1.1

Reproduction Link

https://jsfiddle.net/jv6cos00/1/

What is Expected?

foo is required to be show.

What is actually happening?

bar is required shown. It seems that the error field is ordered by character, while I need it order by index in project.

[kazupon]

Thank you for your feedback! 😺

I checked your code. Why do you use v-validate as duplication fields ? Sorry, I could not understand your comment.

[erguotou520]

Fixed https://jsfiddle.net/jv6cos00/2/

[erguotou520]

Seems still order by character, not index or configurable？

[kazupon]

release v2.1.2 please try it! https://github.com/vuejs/vue-validator/releases/tag/v2.1.2

[erguotou520]

Yes, updated. But still shows bar is required. https://jsfiddle.net/erguotou525/jv6cos00/3/

[kazupon]

This is works properly.

$ node
> var arr = ['foo is required', 'bar is required']
undefined
> arr.sort()
[ 'bar is required', 'foo is required' ]

[erguotou520]

Think about this scene. A login form with username and password input, both are required. The error message shows when users click the submit button. And the error message dom just show one of the first error message, like this:

<span>{{$validation.errors&&$validation.errors[0].message}}</span>

So when users clicked submit button with no username or password typed, the message The password is required. shows. While I think the message The username is required. need to be shown first.
I know there is someway to implement this requirement, but just for the order function, I think this is not good. I don't know if you understand my explanation.

[kazupon]

Thanks your explanation!

In current verison, The top-level validation errors properties ($validation.errors) can not expect validation based on user input order.

If you need to expect it, use the each field errors. e.g.

<!-- username -->
<span>{{ $validation.username.invalid && $validation.username.errors[0].message}}</span>
<!-- password -->
<span>{{ $validation.password.invalid && $validation.password.errors[0].message}}</span>

[erguotou520]

If I just want to show one message, the structure may be

<span>{{ $validation.username.invalid && $validation.username.errors[0].message}}</span>
<span>{{ $validation.username.valid $validation.password.invalid && $validation.password.errors[0].message}}</span>

[kazupon]

I seems it's okay as well.