Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form Validation for generic forms using Vuelidate ? Is there a recommendable approach? #453

Open
awacode21 opened this issue Mar 15, 2019 · 5 comments

Comments

Projects
None yet
5 participants
@awacode21
Copy link

commented Mar 15, 2019

Hi guys,

i have the following scenario. Forms which do not know their child components (form fields) and the child components do not know their parent form, as everything is put together by a content management system.
So the form fields need to contain their validation configuration by themself. But there needs to be the connection to the whole form.
I would like to do the validation with vuelidate but do not find an elegant way to build it generic.
How would you do the form validation with vuelidate in my case?

Thanks for your help! Best regards, Annick

@shentao shentao added the 2.0 label Mar 18, 2019

@dobromir-hristov

This comment has been minimized.

Copy link
Contributor

commented Mar 18, 2019

I'm sorry but there is no elegant way at this point. This will be one of the core-focus features in the upcoming v 2.0 release

@awacode21

This comment has been minimized.

Copy link
Author

commented Mar 20, 2019

Thanks for your reply! Good to know, I've already doubted my qualities, that I don't see the solution. I have found a workaround that I don't think is so great, but that somehow works. I think it's good that the 2.0 release addresses the issue. Are there any plans as to when the 2.0 release will be approximately?

@AndreasCag

This comment has been minimized.

Copy link

commented Mar 27, 2019

I have successfully build validations for generic forms with functions.

Here is copy-paste example of what I have in some project:


    validations() {
      const validation = { values: {}, files: {} };

      _.forEach(this.fields, field => {
        if (field.realType === 'hidden' || field.realType === 'button') {
          return;
        }

        if (field.realType === 'file') {
          if (field.required) {
            validation.files[field.name] = {
              required,
            };
          }

          return;
        }

        const fieldValidations = {};

        if (field.realType === 'number' && field.name.toLowerCase() === 'amount') {
          let limit;
          if (!this.currency) {
            limit = field.personalLimits;
          } else {
            limit = _.find(field.limits, { currency: this.currency });
          }

          limit && _.extend(fieldValidations, {
            between: between(limit.min, limit.max),
          });
        }

        if (field.required) {
          _.extend(fieldValidations, {
            required,
          });
        }

        validation.values[field.name] = fieldValidations;
      });

      return validation;
    },
@dobromir-hristov

This comment has been minimized.

Copy link
Contributor

commented Mar 27, 2019

The above example has nothing to do with the question.

@pju-

This comment has been minimized.

Copy link

commented Apr 10, 2019

I think I have a pretty neat solution for the problem you are describing, using a "ValidationObserver" and "ValidationProvider" functional wrapper component around form/the individual fields that communicate the validations using Vue's provide/inject syntax and scoped slots. The only problem is that you can't use simple a simple v-model anymore but need to manually manage the update events, but that's no big deal.

That way the form with the ValidationObserver has the info about the whole nested validation state, the ValidationProvider wrapper does the import of all rules you need, and the individual field components define the rules/validation configuration for themselves and (through a scoped slot) receive $invalid, $dirty, $error and so on.

It's inspired by the equivalent components VeeValidate comes with but much more lightweight, I think it's a pretty elegant solution.

Built it for work, but I can ask if we will open source it. If you have any questions in the meantime, let me know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.