I have a problem regarding form validation with vuelidate. I’m using Vue 2.9.6 with vuelidate 0.7.5
I recommend opening this jsfiddle while reading my problem description:
jsfiddle.net/Philgarth/h5v7km2s/
(SO prevents me from posting the link properly, sorry .... just prepend "https://")
I’m developing an account book for private bank accounts and currently I’m working on the depositor-form-component, where users can add new depositors. Each depositor must have a name and at least one bank account to submit the depositor-form and return to the account-view-component.
As you can see in the jsfiddle I have a textfield for the name and a dropdown for the accounts which initially is empty and disabled. A new account can be drafted by clicking the „+“-button besides the dropdown. With „drafted“ I mean, that the account in the finished app shouldn’t get posted to the database right away. Because users should be able to create multiple accounts for a depositor only the finished and validated depositor-object with one ore more accounts is sent to the database by submitting the whole depositor-form.
While a new account is drafted, the variable „pendingAccountCreation“ is set to true, which is why the account fields are displayed via „v-if“ as well as two buttons to submit or discard the account data. When clicking on either of these buttons, the validation-object „updatedAccount“ should be resetted, so that by drafting another account the fields neither are dirty nor have errors.
Now the problem is, that the validators don’t react to changes to the input field in some cases – e.g. „required“ remains false although the input field is not empty.
I made some tests and could determine that the error only occurs, when an account-draft is discarded by clicking the „x“-button while no other accounts are already created. As soon as at least one account is created and available in the dropdown everything works as expected and the validators react to input changes when drafting another account.
Now if you want to help me I ask you to reproduce the error in the jsfiddle and try to figure out, what I’m doing wrong here.
Thanks in advance and have a nice day š
from Why do vuelidate validators no longer react to input changes?
No comments:
Post a Comment