Vee-validate: Once an input has been visible using v-if, it always validates it as part of the form even when hidden again.

[denjaland]

Versions:

• VueJs: 2.0.3
• Vee-Validate: beta17

Description:

Hi,

I'll publish a jsfiddle if required, but perhaps you're already aware of this issue.
I have form in which I have some items that I do not want to display using v-if tags.

If the input has been shown once, and then has been hidden using v-if = false then it seems that vee-validate is still validating the hidden field. It work great as long as the input has been hidden from the page load, but once displayed, and hidden again, it continues validating it.

Is this a known issue?

Steps To Reproduce:

[logaretm]

yep this is the next on my list, it has been reported before. but It is kinda hard to tackle since some rules need the existence of the fields before the time of validation, some don't. I will look into it this week.

[denjaland]

okay sounds great!
you happen to have the link to the other issue? I can then just follow that one. DIdn't find it earlier.

Again thanks for the great component :-)

[logaretm]

Well they are not exactly the same issue but they all are caused by the same problem: #119 and #123

[denjaland]

Okay - someone please get me a pair of glasses. It's issue #123 of course.
I'm gonna go ahead and ubscribe there :-)

[tiagomatosweb]

Any workaround while it is being implemented?
I have two containers which I show depending on the user wish. The fields in the container that is hidden is always being validated.

[denjaland]

I don't think there's a clean workaround to be honest. In your case you could put two forms perhaps if you do not have shared fields that you need in both cases.
Otherwise I would wait for the fix. W

[muchacho-diesel]

I also have this problem. When I hide a modal with the validator the browser crashes

[logaretm]

@muchacho-diesel probably not the same issue, make sure you have the latest version. probably you are still running beta 15 which had the detch issues.

[muchacho-diesel]

@logaretm Thank you for putting me in the right direction. The problem was indeed the older beta 15 version I was running.

[tiagomatosweb]

@logaretm I just run npm install vee-validate@next --save and it came with beta15.

[tiagomatosweb]

My work around was create a different scope for each if statement. Then, I pass as an argument which form scope I want to validate.

[logaretm]

Sorry about the tag issue, should be resolved now, thanks for reporting it.

[logaretm]

@denjaland I've fixed a couple of related issues can you check if it is resolved with the latest build?

[tiagomatosweb]

Hi @logaretm, is the latest build beta17 or did you forget to setup a new tag?

[logaretm]

nope, I meant to try to grab it from the repository itself and use it in his project files directly. But I will release a tag soon if I can't include more fixes in there.

[denjaland]

Hi - will try and do asap. Otherwise it might be handy if it was tagged though.

[tiagomatosweb]

I just replaced the files dist/vee-validate.js and dist/vee-validate.min.js. Now all my fields are showing a error like this

"vee-validate.js?fd76:175 [vee-validate]: Trying to validate a non-existant field: "form.institute_id". Use "attach()" first."

No sure if I did right!

[logaretm]

I'm not sure, it seems like you are validating an expression. I have also added minor and possibly breaking changes, basically expressions like "form.institute_id" won't be used as a name since the expression can be anything.

I just pushed another build, can you try it? sorry about that.

[tiagomatosweb]

Now my error bag is coming with a blank field like so

{ "errors": [ { "field": "null", "msg": "The Institute field is required.", "rule": "required", "scope": null } ] }

My validation

<select v-model="form.institute_id" v-validate data-vv-rules="required" data-vv-as="Institute">
     <option value="">Choose</option>
</select>

Tks a lot!

[logaretm]

you need to always provide either a name or data-vv-name attribute on your inputs, expressions won't be used as names anymore

[imuller]

Can you also release this fix for the Vue 1 version?

[logaretm]

sure, once a fix is confirmed on vue 2 it will be implemented for vue 1

[denjaland]

Hi guys,

Just wanted to give you a heads up. I was a bit swamped, and therefor unable to test this yet.
I'll try and squeeze it in this week, but it may be second half.

Just wanted to let you know in case you were waiting for me.

Sorry about that!

[logaretm]

Its okay, I think it is fixed, but I wanted another confirmation. whenever you can.

[tiagomatosweb]

Hi @logaretm,
Sorry for may delay!

I've tested with the data-vv-name attribute and it worked fairly well.

Follow my validation

<select v-model="form.institute_id" v-validate data-vv-rules="required" data-vv-as="Institute" data-vv-name=""form.institute_id">
     <option value="">Choose</option>
</select>

However, when I use v-for
1) when I add/remove item in the list all validation messages reset
2) when I remove a item and then try to validate, nothing is being validated.

I think it because all fields have the same data-vv-name. This name should be dynamically right? However, I couldn't figure out yet. No much time to play!

https://jsfiddle.net/tiagomatosweb/f1c9d5xs/

[logaretm]

@tiagomatosweb you are correct its due to names being the same, you might want to make the names a little bit more dynamic.

https://jsfiddle.net/f1c9d5xs/1/

I will probably close then then, if the issue still remains, anyone feel free to create a new issue.

[tiagomatosweb]

Yes, I knew that! I was trying to do it using data-vv-name="'fruit_'+index" without spaces and didn't work! It doesn't recognise the index variable and make the all text as a string. With space yes, I can concatenate. Everyday learning...

Tks very much @logaretm and see you in the next issue :)

UPDATE
Oops! Just realised that there is nothing regarding to the space. We should bind the attribute in order to make it as a "variable".

[denjaland]

Hi - any chance you can tag beta18?
That way I'll have someone test it tomorrow for me. - we pull dependencies automatically every day in development, so that will be automatically tested then.

[logaretm]

okay will try to do a quick one in few hours

[denjaland]

Hi,

I pulled in beta18 and did a quick test, but didn't fix my problem. I will try and make a fiddle asap to isolate the problem.

David.

[denjaland]

okay - the fiddle I was trying to create to reproduce it in an isolated case is not giving me errors...
I'll have a look at our code to see why it doesn't work as expected.