question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question: Validate clientside multiple fields as 'distinct' rule

See original GitHub issue

Versions

  • vee-validate: 2.0.9
  • vue: 2.5.16

This is more of a question than a bug IMO. I literally searched through the entire API, the community online, the issues on github but couldn’t figure a way to deal with this problem.

So I have a form which contains dynamic sections. Each section contains a dropdown (let’s keep it simple). For all of my dropdown, I want to make sure that the same value is not picked more than once.

I thought of making a custom rule that would call our Laravel backend, but this is not possible currently because of our implementation of validation on this side.

Currently, this is how I manage backend errors coming in:

manageBackendErrors(errors) {
      for (let fieldName in errors) {
        // gives us an error in the ErrorBag-item format
        const fieldErrors = errors[fieldName].map(msg => {
          return { field: fieldName, msg };
        });

        const field = this.$validator.fields.find({ name: fieldName });

        // then for that field, make a correlation on the id of the error and the field
        // and add the error to our Error Bag
        fieldErrors.forEach(error => {
          // we can access the id using field.id
          error.id = field.id;
          error.rule = 'distinct';
          this.verrors.add(error);
        });

        // finally update the flags, which also updates the opposite flags
        // (i.e: valid-invalid, dirty-pristine)
        field.setFlags({
          valid: !! fieldName.length,
          dirty: true
        });
      }
    }

This work well for single dropdown; the error is mapped correctly. But when I change the value of any dropdown, I would like the other errors of these fields to react as well. Is there any way I could let Vee-Validate know that multiple fields are binded to each other so that when one change, the other’s error re-evaluate as well?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
logaretmcommented, Aug 6, 2019

@kevrousso it will be available in v3, this cannot be implemented in v2. I don’t have an ETA yet, but v3 still needs more code samples and examples before its ready.

1reaction
logaretmcommented, Aug 31, 2018

I don’t have a planned release date unfortunately as the beta releases introduced a major re-write, and the amount of time is severely limited due to my army mandatory service. Now I have a few features in mind that I would like to address before the 2.1 is ready:

https://github.com/baianat/vee-validate/projects/3

Read more comments on GitHub >

github_iconTop Results From Across the Web

Question: Validate clientside multiple fields as 'distinct' rule ...
So I have a form which contains dynamic sections. Each section contains a dropdown (let's keep it simple). For all of my dropdown,...
Read more >
Client-side form validation - Learn web development | MDN
If the data entered in a form field follows all of the rules specified by the above attributes, it is considered valid. If...
Read more >
Client side validation for unique field mvc - Stack Overflow
This will remotely validate the uniqueness of the Tag filed and display error to the user using unobtrusive javascript. Finally your view should ......
Read more >
The Many Amazing Uses of JSON Schema: Client-side ...
there are usually some validation rules to consider. For example, the name field is required and and cannot be longer than 20 characters...
Read more >
Differentiate between client side validation and server side ...
If the user request does not require any server resources to validate the input , you can use Client Side Validation.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found