Search code examples
laravelvue.jsvee-validate

Vee Validate Custom Rules not working in Laravel. Uncaught (in promise) Error: No such validator 'xxx' exists

I have set up a Laravel with VueJs as a SPA. Also I integrated Vee Validate to validate all my form inputs. The default rules work as expected. However I don't seem to get my custom rules to work. I always get the error message:

Uncaught (in promise) Error: No such validator 'xxx' exists.

I followed this tutorial: https://medium.com/@rafaelogic/creating-a-custom-rule-in-vue-vee-validate-83777b9a5126

Here I have imported Vee Validate and the custom rules in my app.js file app.js

Inside validators/index.js I have the following validators/index.js

That is the custom "rule" - just for testing inside validators/rules/number_of_electrical_feeds.js.

number_of_electrical_feeds.js

And that is the component that tries to use the rule - inside js/components/LuminaireLine/Form.js Form.js

What's the error I'm making?

Solution

  • You should unify your imports, the vee-validate and vee-validate/dist/vee-validate.full.esm are two different dist files and thus each maintains their own rules and ecosystem.

    You need to decide which version of vee-validate you want to use and only import everything from that dist

    That includes extend, and the components and basically any vee-validate API you will import.

    import { ValidationProvider, ValidationObserver, extend } from 'vee-validate/dist/vee-validate.full.esm';

    You can configure a webpack alias to make this easier for you.