web-dev-qa-db-ja.com

vee-validateのカスタム検証メッセージ

約

Laravel-5.8 with vue.jsを使用しています。これはvee-validateパッケージを使用してカスタムエラーメッセージを表示することです。しかし、いくつかの理由により、必要なカスタムメッセージが表示されず、代わりにが表示されます-first_nameフィールドは必須です。予想されるのは-名を入力してください。

以下のコードはapp.jsにあります

import { ValidationProvider } from 'vee-validate/dist/vee-validate.full';

使用されているコンポーネントがあります。以下はHTMLコードです

<template>    
    <div>
        <form role="form">
            <ValidationProvider name="first_name" :rules="required">
                <div slot-scope="{ errors }">
                    <input v-model="profileForm.first_name" class="form-control">
                    <p>{{ errors[0] }}</p>
                </div>
            </ValidationProvider>

            <button type="button" @click="validateBeforeSubmit()">Update Profile</button>
        </form>
    </div>
</template>

以下はJsスクリプトコードです

<script>
    import { localize } from 'vee-validate/dist/vee-validate.full';
    import en from "vee-validate/dist/locale/en.json";

    export default {
        data() {
            return {
                profileForm: {
                    first_name: ''
                },
                customMessages: {
                    en: {
                        custom: {
                            'first_name': {
                                required: 'Please enter first name'
                            }
                        }
                    }
                },
            }
        },
        created() {
            localize("en", this.customMessages);
        },
        methods: {
            validateBeforeSubmit() {
                this.$validator.validateAll();
            }
        }
    }
</script>

何か不足していますか？詳細が必要な場合はお知らせください。

laravelvue.jsvue-componentlaravel-5.8vee-validate
3
Pankaj

_this.customMessages.en_をlocalize()に渡す必要があるか、または渡されたオブジェクトに最上位のプロパティenがあると思います。渡された辞書は カスタムメッセージのみを含む である必要があります。

0
Olivenbaum