Make v-form validation great again #1581

KaelWD · 2017-09-03T13:59:38Z

Form validation (<v-form v-model="valid">) is kinda useless right now:

It only works on immediate children, so nested components such as date pickers don't count
valid only changes when every single form field has been updated, whether they require validation or not. This makes optional fields impossible without having to call form.validate()
If a field is dynamically added to the form (with v-if or similar), it doesn't ever count towards validation, even if form.validate() is called
If a field is dynamically removed from the form and is invalid, the form will remain in an invalid state, even if form.reset() or form.validate() is called

This PR fixes all these issues, making validation of forms like this or this possible.

Deeply nested children will be included in the validation
valid will change after every update. form.validate() can still be called to check overall form validity and force validation errors to display on untouched invalid fields
A new boolean prop lazy-validation is added that only takes into account touched fields when determining overall validity (this is the same as it is currently) - so form.reset() will result in valid being true
Dynamically added fields will work the same way as static ones
Dynamically removed fields will be removed from consideration, so if an invalid field is removed from an otherwise valid form, valid should now be true

- data.inputs is now an array instead of an int - Dynamically added inputs contribute to form validity - Removed inputs no longer contribute to form validity

- Now emits on every change, allowing optional fields - Removed redundant function calls

- Validate runs through all inputs again instead of stopping at the first error

Fixes vuetifyjs#1601

johnleider · 2017-09-07T01:49:29Z

Create a test corresponding to the changes and I'll finish my review and merge, thank you.

johnleider

Nice work!

johnleider · 2017-09-07T02:02:32Z

src/components/VForm/VForm.js

-      }, false)
-
-      return !errors
+      return !this.inputs.filter(input => input.validate(true)).length


This could/should be !this.inputs.every(input => input.validate(true))

I had that in 9a5063b, but it stops at the first invalid field. I can change it to ...length !== 0 to make it more clear what is happening.

Edit: or

const errors = this.inputs.filter ... .length return !errors

Could also possibly use this.inputs.some(input => !input.validate(true))

.some has the same problem as .every.

The every method executes the provided callback function once for each element present in the array until it finds one where callback returns a falsy value. If such an element is found, the every method immediately returns false.

some() executes the callback function once for each element present in the array until it finds one where callback returns a truthy value (a value that becomes true when converted to a Boolean). If such an element is found, some() immediately returns true.

input.validate() must be called on every element so that validation errors are forced to display.

johnleider · 2017-09-07T02:02:39Z

src/components/VForm/VForm.js

+        }
+
+        this.inputs.push(child)
+


remove space

johnleider · 2017-09-07T02:02:53Z

src/components/VForm/VForm.js

-    this.$vuetify.load(() => {
-      this.getInputs().forEach((child) => {
-        this.inputs += 1
+    this.$vuetify.load(() => this.watchInputs())


This should be this.$vuetify.load(this.watchInputs)

That will pass the global Window object to watchInputs, instead of undefined.

Is .load() even needed? Nothing seems to change if I remove it.

It's for SSR protection lol

Also valid point, no need to change this.

azaars · 2017-09-07T04:59:23Z

Brilliant!

Now I begin to think that external validators are second class. I believe this enhancement should work on v-stepper, that is by wrapping it with v-form, or perhaps even better if we have v-stepper built in with v-form, which can optionally be enabled with some props like use-form.

Looking forward for a quick merge!

johnleider · 2017-09-07T14:28:21Z

src/components/VForm/VForm.js

@@ -78,11 +75,13 @@ export default {
      })
    },
    validate () {
-      return !this.inputs.filter(input => input.validate(true)).length
+      return !this.inputs.filter(input => input.validate(true))


What is the reasoning for this change?

Oops, thanks for pointing that out. That wasn't meant to be pushed.

- Make validate() method more readable

lock · 2019-04-16T08:26:59Z

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord

Do a deep search of VForm children to get inputs

33fd31b

KaelWD changed the title ~~[WIP] Do a deep search of VForm children to get inputs~~ Do a deep search of VForm children to get inputs Sep 3, 2017

KaelWD changed the title ~~Do a deep search of VForm children to get inputs~~ [WIP] Make v-form validation great again Sep 3, 2017

Improve speed of getInputs

6b379da

KaelWD force-pushed the form-deep-search branch from 028a280 to 6b379da Compare September 3, 2017 18:02

KaelWD added 3 commits September 4, 2017 04:06

Update watched children when an input is added or removed

c32ceb2

- data.inputs is now an array instead of an int - Dynamically added inputs contribute to form validity - Removed inputs no longer contribute to form validity

Clean up errorBag watcher

a18d73d

- Now emits on every change, allowing optional fields - Removed redundant function calls

Simplify validate method and clear errorBag on form reset

81f6d1d

KaelWD changed the title ~~[WIP] Make v-form validation great again~~ Make v-form validation great again Sep 3, 2017

Empty errorBag with $delete instead of = {}

c713172

KaelWD force-pushed the form-deep-search branch from 7acec58 to c713172 Compare September 3, 2017 19:44

nekosaur self-requested a review September 3, 2017 20:20

Inputs can be an array of objects instead of uids

9a5063b

- Validate runs through all inputs again instead of stopping at the first error

KaelWD mentioned this pull request Sep 6, 2017

Default v-form validation #1601

Closed

Add lazy-validation prop and move removal check to updated()

5ecc20a

Fixes vuetifyjs#1601

johnleider self-assigned this Sep 7, 2017

johnleider self-requested a review September 7, 2017 01:49

johnleider requested changes Sep 7, 2017

View reviewed changes

johnleider reviewed Sep 7, 2017

View reviewed changes

Only clear errorBag if using lazy validation

671f33a

- Make validate() method more readable

KaelWD force-pushed the form-deep-search branch from 1cf254f to 671f33a Compare September 7, 2017 14:47

johnleider approved these changes Sep 7, 2017

View reviewed changes

johnleider merged commit 202f051 into vuetifyjs:dev Sep 7, 2017

KaelWD mentioned this pull request Sep 7, 2017

Regression - Checkboxes do not re-evaluate their rules when reset #1626

Closed

KaelWD deleted the form-deep-search branch September 7, 2017 17:42

nekosaur mentioned this pull request Sep 8, 2017

Form validation doesn't work with tabs #1639

Closed

lock bot locked as resolved and limited conversation to collaborators Apr 16, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make v-form validation great again #1581

Make v-form validation great again #1581

KaelWD commented Sep 3, 2017 •

edited

Loading

johnleider commented Sep 7, 2017

johnleider left a comment

johnleider Sep 7, 2017

KaelWD Sep 7, 2017 •

edited

Loading

nekosaur Sep 7, 2017

KaelWD Sep 7, 2017

johnleider Sep 7, 2017

johnleider Sep 7, 2017

KaelWD Sep 7, 2017 •

edited

Loading

johnleider Sep 7, 2017

johnleider Sep 7, 2017

azaars commented Sep 7, 2017

johnleider Sep 7, 2017

KaelWD Sep 7, 2017

lock bot commented Apr 16, 2019

Make v-form validation great again #1581

Make v-form validation great again #1581

Conversation

KaelWD commented Sep 3, 2017 • edited Loading

johnleider commented Sep 7, 2017

johnleider left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KaelWD Sep 7, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KaelWD Sep 7, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

azaars commented Sep 7, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lock bot commented Apr 16, 2019

KaelWD commented Sep 3, 2017 •

edited

Loading

KaelWD Sep 7, 2017 •

edited

Loading

KaelWD Sep 7, 2017 •

edited

Loading