Vee-validate: RC 1 release notes for field flags

Created on 9 May 2017  ·  5Comments  ·  Source: logaretm/vee-validate

So I was reading the release notes and saw this:

invalid -The field has been validated at least once and is not valid.

At least once, but that's not correct, because when I don't use v-validate.initial, the invalid=false and also valid=false

I feel like there is some inconsistency here. How is that invalid and valid are both false even though it says that the field should be validated at least once?
It's either implementation issue or a bad naming here.

The flags that I get initially without the '.initial' are:
{ "untouched": true, "touched": false, "dirty": false, "pristine": true, "valid": false, "invalid": false }
Which for me is confusing. Because you can use valid in one place and invalid on another and get totally different result.

✨ enhancement ❔ question

All 5 comments

Valid and Invalid aren't the inverse of each other initially as both are false since the field has not been validated yet, initial should trigger the initial validation, and then one of them must be the inverse of the other.

I just attempted this in a fiddle:

https://jsfiddle.net/1c8ovzv6/2/

and It seems to work fine, did I misunderstood your issue?

No you didn't misunderstood it, but I find it strange as 1) it says after initial check, so I presume it isn't related to .initial and 2) even if this is the case I still would expect it to be at least null as false will indicate that the field was checked and the flag was set.
Because now in order to check if the field is valid I really need to use .initial so that I can simply say fields.Field && fields.Field.valid in if statement for example.

I see, Null is a good value for undetermined status.

Yes, that sounds very good.
I only have one problem, don't know if I need to write it here or not.
After the removal of FieldsBag, now for example if I need to disable a button when no validation was performed on the fields yet, or they are wrong, I need to use initial otherwise the ErrorsBag is empty and the errors.any() returns false. Before that you could use fields.passes() if I am not wrong and even thou there were no errors, it returned false initially.

So for example if I want to add class when having errors, but only after the field is dirty and using the .initial(otherwise the errors.any() is false) I need to do it like this:

<div :class="{ 'has-errors': fields['form[field]'] && fields['form[field]'].dirty && errors.has('form[field]') }">

@twify93 I have added the null as the initial value for the valid and invalid flags, regarding the verbose conditions, the previous method API was somewhat neat but the flags wasn't reactive meaning it caused a limited usage in computed props which was a critical thing to have. also there were a lot of inconsistencies between the flag behavior and the actual state of the input, so they had to be revised.

You can construct your own helpers for this, basically passes means that the field is dirty and is valid, so you can do that in your computed props, or use the included fieldsGetter which reduces the amount of conditions you have to write.

I might add the previous methods API via a similar helper. still have few more ways to improve this.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Hoagiex picture Hoagiex  ·  3Comments

saintplay picture saintplay  ·  3Comments

MaxMilton picture MaxMilton  ·  3Comments

yyyuuu777 picture yyyuuu777  ·  3Comments

YamenSharaf picture YamenSharaf  ·  3Comments