logaretm / vee-validate Goto Github PK

Hello,

I am validating values remotely using VueResource and returning a Promise, which works well.
The only thing I am missing is the support to display the error messages sent back by the server.

I used the vue-validator package before, which allowed me to do something like that:

return ValidationResource.validate(params, body)
    .then((result) => {
        return Promise.resolve()
    }).catch(({ data }) => {
        return Promise.reject(data[field][0])
    })

I would love to have this functionality supported by vee-validator as well.

Regards,
Andreas

from vuejs.org

Apart from el, you should treat these arguments as read-only and never modify them. If you need to share information across hooks, it is recommended to do so through element’s dataset.

Directives are only meant for direct DOM manipulations in 2.0, indeed.

But I noticed that Vee still use the {context} to store validate status, am I right?

Note: The latest version of this plugin will keep pointing to the Vue 1.x version, until Vue 2.0 is released which is soon, then the latest will point to Vue 2.0 while another tag will be used for the Vue 1.x versions. 

Vue 2.0 is released. Should we still install next or not ?

Hi, how are you?

First I want to thank the excellent work. The api is our job to be more productive. Congratulations!

I believe we have found an inconsistency. In confirmation rule (confirmed), the second attribute is not being translated as my definition of local messages. Translation to other texts is perfect.

You can check this !?

Thank you.

Jackson Ricardo Schroeder

When using the date_format rule, any format with a ":" in it does not work properly. For example:

label Time
  input.form-control(type='time',v-model='proposedTime',v-validate='proposedTime',data-rules='required|date_format:HH:mm',data-as='time')
p.text-danger(v-if='errors.has("proposedTime")').
  {{errors.first('proposedTime')}}

The error message comes out as: "The time must be in the format HH."
I've got the date_format working with "MM/DD/YYYY" so I know that moment is set up correctly.

It would allow us to check if the field has been validated and is not just an empty input.

:class="{ 'is-valid': passed.has('email') }"

Hi,

First of all: Nice work! Work a lot of with Laravel so don't have to remember 2 sets of validation rules.

Secondly, would it be possible to get this to work for dropdowns? I can attach the validation and it nicely tells me that the dropdown is required, but selecting an option becomes unusable as it keeps defaulting to the default value.

Cheers

I set locale option to vi or ar but all of them don't work. There is a warning in console:

vee-validate: You are setting the validator locale to a locale that is not defined in the dicitionary. English messages may still be generated

Hello,

In AngularJS and vue-validate, we have available the event "dirty". With the event, for example, we can see if the form was "manipulated" and added the validation check of the rules, enable - or not - the button to save the form data.

How to do this validation with vee-validate?

Thanks for the feedback.

vue.common.js?e881:1019 [Vue warn]: Failed to resolve directive: validatewarn @ vue.common.js?e881:1019resolveAsset @ vue.common.js?e881:1941compileDirectives @ vue.common.js?e881:7531compileElement @ vue.common.js?e881:7143compileNode @ vue.common.js?e881:7099compileNodeList @ vue.common.js?e881:7282compileNodeList @ vue.common.js?e881:7283compileNodeList @ vue.common.js?e881:7283compileNodeList @ vue.common.js?e881:7283compileNodeList @ vue.common.js?e881:7283compileNodeList @ vue.common.js?e881:7283compile @ vue.common.js?e881:6878Vue._compile @ vue.common.js?e881:8604Vue.$mount @ vue.common.js?e881:9446Vue.init @ vue.common.js?e881:2468Vue.init @ vue-router.js?e71f:1756Override.Vue.init @ vue-i18n.common.js?2c49:144VueComponent @ VM2549:2build @ vue.common.js?e881:5837activate @ vue-router.js?e71f:1176(anonymous function) @ vue-router.js?e71f:1480step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506deactivate @ vue-router.js?e71f:1119step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500(anonymous function) @ vue-router.js?e71f:1464step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506(anonymous function) @ vue-router.js?e71f:1098(anonymous function) @ vue-router.js?e71f:845Vue.resolveComponent @ vue.common.js?e881:8869resolveAsyncComponent @ vue-router.js?e71f:843canActivate @ vue-router.js?e71f:1090step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500(anonymous function) @ vue-router.js?e71f:1463step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506canDeactivate @ vue-router.js?e71f:1073step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500start @ vue-router.js?e71f:1462startTransition @ vue-router.js?e71f:2578_match @ vue-router.js?e71f:2592onChange @ vue-router.js?e71f:2168listener @ vue-router.js?e71f:979start @ vue-router.js?e71f:982start @ vue-router.js?e71f:2351(anonymous function) @ app.js?7ac9:46start @ quasar.common.js?e3df:5165(anonymous function) @ app.js?7ac9:45(anonymous function) @ app.js:1362__webpack_require @ app.js:556fn @ app.js:87(anonymous function) @ app.js:587__webpack_require @ app.js:556(anonymous function) @ app.js:579(anonymous function) @ app.js:582
vue.common.js?e881:1019 [Vue warn]: Error when evaluating expression "{'has-error': errors.has('email')}": TypeError: Cannot read property 'has' of undefinedwarn @ vue.common.js?e881:1019Watcher.get @ vue.common.js?e881:3176Watcher @ vue.common.js?e881:3158Directive._bind @ vue.common.js?e881:8345linkAndCapture @ vue.common.js?e881:6928compositeLinkFn @ vue.common.js?e881:6897Vue._compile @ vue.common.js?e881:8611Vue.$mount @ vue.common.js?e881:9446Vue.init @ vue.common.js?e881:2468Vue.init @ vue-router.js?e71f:1756Override.Vue.init @ vue-i18n.common.js?2c49:144VueComponent @ VM2549:2build @ vue.common.js?e881:5837activate @ vue-router.js?e71f:1176(anonymous function) @ vue-router.js?e71f:1480step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506deactivate @ vue-router.js?e71f:1119step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500(anonymous function) @ vue-router.js?e71f:1464step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506(anonymous function) @ vue-router.js?e71f:1098(anonymous function) @ vue-router.js?e71f:845Vue.resolveComponent @ vue.common.js?e881:8869resolveAsyncComponent @ vue-router.js?e71f:843canActivate @ vue-router.js?e71f:1090step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500(anonymous function) @ vue-router.js?e71f:1463step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506canDeactivate @ vue-router.js?e71f:1073step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500start @ vue-router.js?e71f:1462startTransition @ vue-router.js?e71f:2578_match @ vue-router.js?e71f:2592onChange @ vue-router.js?e71f:2168listener @ vue-router.js?e71f:979start @ vue-router.js?e71f:982start @ vue-router.js?e71f:2351(anonymous function) @ app.js?7ac9:46start @ quasar.common.js?e3df:5165(anonymous function) @ app.js?7ac9:45(anonymous function) @ app.js:1362__webpack_require @ app.js:556fn @ app.js:87(anonymous function) @ app.js:587__webpack_require @ app.js:556(anonymous function) @ app.js:579(anonymous function) @ app.js:582
vue.common.js?e881:1019 [Vue warn]: Error when evaluating expression "errors.has('email')": TypeError: Cannot read property 'has' of undefinedwarn @ vue.common.js?e881:1019Watcher.get @ vue.common.js?e881:3176Watcher @ vue.common.js?e881:3158Directive._bind @ vue.common.js?e881:8345linkAndCapture @ vue.common.js?e881:6928compositeLinkFn @ vue.common.js?e881:6897Vue._compile @ vue.common.js?e881:8611Vue.$mount @ vue.common.js?e881:9446Vue.init @ vue.common.js?e881:2468Vue.init @ vue-router.js?e71f:1756Override.Vue.init @ vue-i18n.common.js?2c49:144VueComponent @ VM2549:2build @ vue.common.js?e881:5837activate @ vue-router.js?e71f:1176(anonymous function) @ vue-router.js?e71f:1480step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506deactivate @ vue-router.js?e71f:1119step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500(anonymous function) @ vue-router.js?e71f:1464step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506(anonymous function) @ vue-router.js?e71f:1098(anonymous function) @ vue-router.js?e71f:845Vue.resolveComponent @ vue.common.js?e881:8869resolveAsyncComponent @ vue-router.js?e71f:843canActivate @ vue-router.js?e71f:1090step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500(anonymous function) @ vue-router.js?e71f:1463step @ vue-router.js?e71f:1503(anonymous function) @ vue-router.js?e71f:1506canDeactivate @ vue-router.js?e71f:1073step @ vue-router.js?e71f:1505runQueue @ vue-router.js?e71f:1500start @ vue-router.js?e71f:1462startTransition @ vue-router.js?e71f:2578_match @ vue-router.js?e71f:2592onChange @ vue-router.js?e71f:2168listener @ vue-router.js?e71f:979start @ vue-router.js?e71f:982start @ vue-router.js?e71f:2351(anonymous function) @ app.js?7ac9:46start @ quasar.common.js?e3df:5165(anonymous function) @ app.js?7ac9:45(anonymous function) @ app.js:1362__webpack_require @ app.js:556fn @ app.js:87(anonymous function) @ app.js:587__webpack_require @ app.js:556(anonymous function) @ app.js:579(anonymous function) @ app.js:582
vue.common.js?e881:1019 [Vue warn]: Error when evaluating expression "errors.first('email')": TypeError: Cannot read property 'first' of undefined

is there any chance to incorporate the mailgun api email validation into the core email rule ?

https://documentation.mailgun.com/api-email-validation.html , something like http://formvalidation.io/examples/using-mailgun-api-validate-email-address/

Hey! great plugin! congrats!
It would be great to have an option for validating the decimal points for numeric data
eg: numeric:{decimals}
<input type="text" data-rules="numeric"> // 123 valid, 12.34 invalid
<input type="text" data-rules="numeric:3"> // 123 valid, 12.34 valid, 147.527 valid, 13.2368 invalid

when i use Vue.use(VeeValidate) ,it occurs the error ,and i cant even get error as it's in ios mobile browser.

Hi logaretm,

I am making a new custom rule to validate whether an email is already in the system or not, and it is having some issues. I am either miss understanding how to create a custom rule, or the js promise concept.

I hereby include some code. I have basically tried a bunch of different things and the ajax call returns the right values, however, I get the following error. Uncaught TypeError: Cannot read property 'then' of undefined(…)

I have the ajax call within an if(value), in case there should be no email i the email field, so that one can return false and not let the validation proceed.

I've also poked around with js Promise but that didn't get anywhere either...

    Validator.extend('email_exists', {
        getMessage: field => `The email is already in the system.`,
        validate: value => {
            if(value) {
                console.log('email_exists value',value);

                $.ajaxSetup({
                    headers:
                    { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
                });

                var request = $.ajax({
                    type: 'GET',
                    dataType: "json",
                    url: 'api/users/email/'+value
                });

                request.done(function(response) {
                    // email not in system, return true so registration can proceed
                    if(response.data.email == '' && response.data.message) {
                        console.log('email not in system, return TRUE', response);
                        return true;
                    }
                    // email in system, return false so the user can login or register with another email
                    else {
                        console.log('email in system, return FALSE', response);
                        return false;
                    }
                });

                request.fail(function(jqXHR, textStatus) {
                    console.log('email_exists ERROR', textStatus);
                    return false;
                });

            } else {
                console.log('NO VALUE return FALSE');
                return false;
            }
        }
    });

I also tried the following, and I got the same error. Uncaught TypeError: Cannot read property 'then' of undefined(…)

        created: function() {

            this.$validator.extend('email_exists', {
                getMessage: field => `The email is already in the system.`,
                validate: value => {

                    console.log('email_exists value',value);

                    this.$http.get('api/users/email/'+value).then( function(response) {
                            console.log('then: ', response);
                        }).catch( function(error) {
                            console.error('email_exists', error);
                        });
                }
            });

            .... 

Any help, example, or guidance is greatly appreciated.:-)

All best,
Max

Any thoughts on letting the validator pass over values in an object that it has no rule for without returning false?

Because validateAll() calls validate() on each key in the object we get a return of false if the object has keys in it that don't have rules. Use case would be a large form with only certain fields to be validated.

This could be implemented in the form of a strict mode that defaults on for current behavior since the validator not running a rule on an item passed in for validation should be a fail in most cases.

Instead of using data-as for the field names substitution it would be more handy if we could just use a dedicated attributes array inside dictionary. This is the Laravel's approach to this.

const dictionary = {
    en: { 
        email: () => 'Some English Message', 
        attributes: { 
            email: () => 'Email address'
        }
    },
    ar:
};

Hello,

It would be nice to have a rule required_if:someField,someValue like in laravel.

Or even better update the validator instance, when the view updates, if that is possible. Currently when removing some required fields with v-if and calling this.$validator.validateAll() the ErrorBag still contains the errors for the removed fields.

Thanks

Unfortunately assign isn't supported because, well.. IE.

Error: Object doesn't support property or method 'assign'
Object.assign(target, defineProperty({}, key, source[key]));

Should work fine with babel but just wanted to report it.
https://babeljs.io/docs/plugins/transform-object-assign/

Hi There

Looking at the email validation regex I see you only allow a select few characters:
export default (value) => /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,6}$/.test(value);

Would it be possible to get a more generic email validation to account for other characters.

I will be more then glad to add this as my first ever open source pull request if you are willing to let me.

as doc said:

Note: You should not use the pipe | within your regular expression in the HTML as it will cause a conflict with how validators parsing work. A workaround is to attach the field programatically and pass the regex there.
how to attach the field programatically and pass the regex there
give me a example

On this project's npm page (npmjs.com/package/vee-validate) the link to the documentation is incorrect.

It lists logaretm.github.io/vee-validate as the location of the docs when it is actually vee-validate.logaretm.com.

I was using vee-validate with the Quasar framework v0.7 (Vue 1) using the #25 workaround.

Now with Quasar v0.8 (Vue 2) I can't make vee-validate work at all. Every page I use it I get "Cannot read property 'vm' of undefined", pointing to this line of code.

To reproduce it:

quasar init foo
cd foo/
npm install
npm install vee-validate --save

Then add in main.js:

import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)

and replace index.vue with the vee-validate example:

<template>
<form  @submit="validateBeforeSubmit">
    <div class="column is-12">
        <label class="label">Email</label>
        <p class="control has-icon has-icon-right">
            <input v-model="email" v-validate.initial="email" data-rules="required|email" :class="{'input': true, 'is-danger': errors.has('email') }" type="text" placeholder="Email">
            <i v-show="errors.has('email')" class="fa fa-warning"></i>
            <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
        </p>
    </div>
    <div class="column is-12">
        <label class="label">Name</label>
        <p class="control has-icon has-icon-right">
            <input v-model="name" v-validate.initial="name" data-rules="required|alpha" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="Email">
            <i v-show="errors.has('name')" class="fa fa-warning"></i>
            <span v-show="errors.has('name')" class="help is-danger">{{ errors.first('name') }}</span>
        </p>
    </div>
    <div class="column is-12">
        <label class="label">Phone</label>
        <p class="control has-icon has-icon-right">
            <input v-model="phone" v-validate.initial="phone" data-rules="required|numeric" :class="{'input': true, 'is-danger': errors.has('phone') }" type="text" placeholder="Phone">
            <i v-show="errors.has('phone')" class="fa fa-warning"></i>
            <span v-show="errors.has('phone')" class="help is-danger">{{ errors.first('phone') }}</span>
        </p>
    </div>
    <div class="column is-12">
        <label class="label">Website</label>
        <p class="control has-icon has-icon-right">
            <input v-model="url" v-validate.initial="url" data-rules="required|url" :class="{'input': true, 'is-danger': errors.has('url') }" type="text" placeholder="Website">
            <i v-show="errors.has('url')" class="fa fa-warning"></i>
            <span v-show="errors.has('url')" class="help is-danger">{{ errors.first('url') }}</span>
        </p>
    </div>

    <p class="control">
        <button class="button is-primary" type="submit">Submit</button>
    </p>
</form>
</template>

<script>
export default {
    data() {
        return {
            email: '',
            name: '',
            phone: '',
            url: '',
        };
    },
    methods: {
        validateBeforeSubmit(e) {
            // Note that validateAll here is missing the values parameter, which tells the validator
            // to trigger validation for attached inputs.
            this.$validator.validateAll();

            if (this.errors.any()) {
                e.preventDefault();
            }
        }
    }
}
</script>

Then launch it with quasar dev.

NB: I commented the annoying preloaders (eslint) in build/webpack.base.conf.js.

I'm having an issue... I register using Vue.use(VeeValidate)... If I look at the root component and my navbar component, i see the error object but on the router-view the error object does not exist and using v-validate gives a warning that the directive was not found.

Any thoughts?

When detaching a field, it triggers a warning when calling validateAll.

I've checked the code and it seems the validate method doesn't check if a field is still in the fieldBag. It just grabs it from fields.

Due to the use of this.el.dataset instead of directive params it is not possible to use v-bind values for these attributes.

The below does not currently work;

<input v-validate="value" v-model="value" :type='type' :name='name' :placeholder='placeholder' :modifiers='modifiers' :has="has" class="input" :data-rules="rules" :data-as="name">

when i saw the doc , i can't figure out the usage scenario below

name="email" ,
data-as="email",
v-model="email"
or

en: {
        attributes: {
            email: 'Email Address'
         }
     },

I am having the same issue #11

import ajax from './directives/ajax'
import selectized from './directives/selectize'
Vue.directive('ajax', ajax);
Vue.directive('selectized', selectized);

import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

import Router from 'vue-router'

Vue.use(Router)
Vue.config.debug = true

import App from './App.vue'
import routes from './routes'

const router = new Router({
  history : true
})

router.map(routes)
router.beforeEach(() => {
  window.scrollTo(0, 0)
})
router.redirect({
  '*': '/'
})

router.start(App, 'app')

Hi,

can we introduce a dirty flag?

So I'm searching for a way to display the save button only when a change happened.

Hello, how are you?

What do you advise me to see if the form has not changed? What do you use today with vee-validate?

Thanks for the answer

Hello,

How do I reset errors in my form? I have a modal window and when reopen, I disregard the previous mistakes.

What do you advise today with vee-validate?

Thank you.

I'm using the v-validate inside a custom input component like so:

//component
<div class="my-input-component">
  <input
    v-validate
    :name="name"
    :data-rules="rules"
    :data-as="alias"
  >
</div>

//consumer
<my-input-component>
    name="email_address"
    rules=""
    alias="email"
  >
</my-input-component>

Right now I get Uncaught TypeError: validator is not a function if I don't pass any rules and the directive is present, but you cannot without resorting to render functions or v-if, v-else branching, conditionally render a directive.

I guess a basic fix would be to exit early on validation if no rules are set, but another idea would be to allow specifying a value of 'novalidate' which would more or less do the same like so:

<div class="my-input-component">
  <input
    :v-validate="shouldValidate ? '' : 'novalidate'"
    :name="name"
    :data-rules="rules"
    :data-as="alias"
  >
</div>

Thoughts?

vue: 2.0.1
vee-validate: 2.0.0-beta.1

There appears to be an issue when using SSR:

TypeError: Cannot redefine property: $validator
    at Function.defineProperties (native)
    at Object.install (__vue_ssr_bundle__:3635:12)
    at Function.Vue.use (/Users/cj/apps/acd/mobile.vue/node_modules/vue/dist/vue.common.js:3138:22)
    at Object.module.exports.exports.default.name (__vue_ssr_bundle__:206:45)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at Object.<anonymous> (__vue_ssr_bundle__:4061:63)
    at __webpack_require__ (__vue_ssr_bundle__:21:30)
    at __vue_ssr_bundle__:65:18
    at Object.<anonymous> (__vue_ssr_bundle__:68:10)
    at /Users/cj/apps/acd/mobile.vue/node_modules/vue-server-renderer/build.js:5471:21

I love the plugin but it does not work in internet explorer.
Currently I am testing it in internet explorer 11 and it doesnt work.
Apparently the main issue is the translations file as ie does not support the syntax

function(field, [target])

with brackets.
Is there an easy fix for this?

Hi,
I tried to use vee-validate for vue.js v 1.0 with component template but it simply doesn't work.
When I use on html without template all is working.

As much as I can see, validation doesn't work on checkbox and radio inputs.

Hi, this is a great project since laravel validation was also a big help for laravel back end. However, I encountered an error while working with vee-validate for Safari Web Browser. Safari throw an error which is 'TypeError: Attempted to assign to readonly property'.

My observation ended up in setDirty function, which was shown in figure below.

Any idea? Thank you so much.

I don't know if I'm not seeing the feature or if it's not present:
for example, if I have an input with data-rules="numeric" and it is empty, it will pass the validation
BUT, if I have something like data-rules="date_format:DD/MM/YYYY" or data-rules="email", and the input is empty, it will NOT pass the validation as if the field is required.

The current validation is limited because the width and height must match exactly (unless I'm missing something), i.e. dimensions:200,200. My requirement is that the image must be at least 200 x 200 px.

Are there any plans of adding the ability to validate the min. width and height of an image?

Thx

Hello,

First, thanks a lot for your lib, really good work.

But I have one complaint: do not use Proxy() because it is impossible to polyfill it. A good description of the problem can be found here: http://stackoverflow.com/questions/24907229/is-there-proxy-object-polyfill-available-google-chrome

It is possible to polyfill Proxy() for an object that already contains properties but impossible to detect new added props and call the handler.
In the Google Proxy-polyfill source, it is quite clear: https://github.com/GoogleChrome/proxy-polyfill/blob/master/proxy.js#L160

Thanks.

vue properties are essentially program vars and are not designed to be field display names for error messages. The validator should take a display-name param or use the input name as it does for nonbound fields.

Hi.

I want to add vee-validate to my Laravel project, but I receive an error: "Use of undefined constant errors - assumed 'errors' "

code:

<div id="app">
    <form class="pure-form pure-form-stacked">
        <div class="pure-u-1">
            <label :class="{'error': errors.has('email') }" for="email">Email</label>
            <input v-validate data-rules="required|email" :class="{'pure-input-1': true, 'has-error': errors.has('email') }" name="email" type="text" placeholder="Email">
            <span class="error" v-show="errors.has('email')">{{ errors.first('email') }}</span>
        </div>
    </form>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.12/vee-validate.min.js"></script>
<script>
        Vue.use(VeeValidate);

        new Vue({
            el: '#app'
        });
</script>

So, I removed this line <span class="error" v-show="errors.has('email')">{{ errors.first('email') }}</span>, there is no errors, but validation not working...

There is a Problem in Safari 10, if i use VeeValidate i get always this bug on entering the webapp. On Chrome, Firefox and IE it works all just fine.

Safari 10
Vue 2.0.2
VeeValidate 2.0.0-beta.13

Hi,

In our app we have some fairly complex dynamic forms that have been broken down into multiple sub components and can be nested a few levels deep. We also currently using vuex too.

I don't seem to be able to get all the components to validate when validateAll is called at the parent level. After having a look at the source code it looks like this only emits and listens on the same component.

Is this something that we should currently be able to do or something that might be looked at in the future?

Regards
James

I am registering the component $validator in a root object to validate globally when user click on submit, but all values come undefined....

"Proxy is not defined " on the IE11
Add anywhichway/chrome-proxy some Browser is run
but IE11 don,t run

Hi Logaretm,

I am trying to add password validation using a regex I found online and adding it as a custom rule. The idea is that one should have a password that is strong enough. However, I seem to get a problem adding the regex. I add the code example below.

Next, I tried something else which you can see in the second piece of code. This time there is no regex error, but there is an error in regards to attach() not being a function.

Help or hints are much appreciated.

All best,
Max

import { Validator } from 'vee-validate';

Validator.extend('verify_password', {
    getMessage: field => `The password must contain at least: 1 uppercase letter, 1 lowercase letter, 1 number, and one special character (E.g. , . _ & ? etc)`,
    validate: value => resolve({
        valid: ^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,}).test(value);
    });
});

Validator.attach('password', 'required|min:8|verify_password');

import { Validator } from 'vee-validate';

Validator.extend('verify_password', {
    getMessage: field => `The password must contain at least: 1 uppercase letter, 1 lowercase letter, 1 number, and one special character (E.g. , . _ & ? etc)`,
    validate: value => {
        var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
        return strongRegex.test(value);
    }
});
Validator.attach('password',  #'required|min:8|verify_password');

Hello,

It would be interesting, a new type of rule. It is for a daily and very common need. I believe it is feasible to release a rule for the name field type, which are accepted only letters and spaces, nothing more.

What do you think!?

as title