mstdmstd
4 months ago
57
0
Vue

Why vee-validate-laravel does not show error for email field?

Posted 4 months ago by mstdmstd

Hello, In laravel 5.8 / vue2.5 / vuex / axios app I use veeValidate and vee-validate-laravel to show errors from laravel on my form and I have a problems that validation error on non unique email is not rendered properly: I my form :

                            <div class="form-row mb-3">
                                <label class="col-12 col-sm-4 col-form-label" for="email">Email</label>
                                <div class="col-12 col-sm-8">
                                    <input
                                            type="text"
                                            :class="{ 'form-control':true, 'text-danger': vueErrorsList.has('email') }"
                                            id="email"
                                            v-validate="'required|max:255|email'"
                                            v-model="email"
                                            data-vv-name="email"
                                            placeholder="Enter user's email"
                                    >
                                    <span v-show="vueErrorsList.has('email')"
                                          class="text-danger">{{ clearErrorLabel(vueErrorsList.first('email'), '') }}</span>
                                </div>
                            </div>

...

            makeSignUp() {
                this.$store.dispatch('signUp');    // calling action
                signUp(this.$data.form)
                    .then((res) => {
                        this.$store.commit("signUpSuccess", res);  // calling mutation
                        this.$router.push({path: '/login'});
                    })
                    .catch((error) => {
                        console.log("error::")
                        console.log( error )

                        this.$setLaravelValidationErrorsFromResponse(error);
                        // this.$setLaravelValidationErrorsFromResponse(error.response.data);
                        this.$store.commit("signUpFailed", {error});   // calling mutation
                    });

In the error text line content is : The given data was invalid.

and request file I have rules :

    public function rules()
    {
        return [
            'email'             => 'required|email|unique:users|max:255',
            ...
        ];
    }

In browser I see error with email field : https://imgur.com/a/k2gZkpe but this error for email field is not in my vueErrorsList error, as I expected.

Why and how to fix it ?

app.js :

import VeeValidate from 'vee-validate';
import VeeValidateLaravel from 'vee-validate-laravel';

const veeValidateConfigArray = {
    errorBagName: 'vueErrorsList', // change if property conflicts
    fieldsBagName: 'fields',
    delay: 0,
    locale: 'en',
    dictionary: null,
    strict: true,
    classes: false,
    classNames: {
        touched: 'touched', // the control has been blurred
        untouched: 'untouched', // the control hasn't been blurred
        valid: 'valid', // model is valid
        invalid: 'invalid', // model is invalid
        pristine: 'pristine', // control has not been interacted with
        dirty: 'dirty' // control has been interacted with
    },
    events: 'input|blur',
    inject: true,
    validity: false,
    aria: true,
};
Vue.use(VeeValidate, veeValidateConfigArray);
Vue.use(VeeValidateLaravel);

package.json :

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.4.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "cors": "^2.8.5",
        "vee-validate": "^2.2.5",
        "vee-validate-laravel": "^1.1.0",
        "vue-js-modal": "^1.3.31",
        "vue-moment": "^4.0.0",
        "vue-notification": "^1.3.16",
        "vue-router": "^3.0.6",
        "vue-select": "^3.1.0",
        "vue-slider-component": "^3.0.31",
        "vue2-filters": "^0.6.0",
        "vuejs-paginate": "^2.1.0",
        "vuex": "^3.1.0"
    }
}

Thanks!

Please sign in or create an account to participate in this conversation.