BootstrapVue VeeValidate - 当表单无效时显示额外的错误消息 [英] BootstrapVue VeeValidate - show an extra error message when form is invalid

问题描述

我正在使用 BootstrapVue 和 VeeValidate 在我的 Laravel + Vue.js SPA(单页应用程序)中.当表单字段无效时，它会自动显示相应位置的错误.但我需要一种方法，以便每当任何表单输入无效时，我都可以在 div 中显示一条消息(即无效数据")，其中 id result 就在 form 上方.

I am using BootstrapVue and VeeValidate in my Laravel + Vue.js SPA (Single Page Appplication). When form fields are invalid, it automatically shows errors in respective positions. But I need a way so that whenever any form input is invalid I can show a message ( i.e. 'Invalid data') within a div with id result just above the form.

我的 Register.vue 组件具有以下形式:

My Register.vue component has the following form :

<template>

    <ValidationObserver ref="form" v-slot="{ passes }">

        <div id="registration_form">
            <div id="page_header" class="text-center" >Register</div>
        <div id="result" v-html="result" class="result text-center"></div>

        <b-form @submit.prevent="passes(onSubmit)" @reset="resetForm">



            <ValidationProvider vid="name" rules="required|min:2" name="name" v-slot="{ valid, errors }">
                <b-form-group
                        label="User Name:"
                        label-for="exampleInput1"

                >
                    <b-form-input
                            type="text"
                            disable-leading-trailing-space
                            v-model="name"
                            :state="errors[0] ? false : (valid ? true : null)"
                            placeholder="Enter your name"
                    ></b-form-input>
                    <b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>
                </b-form-group>
            </ValidationProvider>


            <ValidationProvider vid="email" rules="required|email" name="Email" v-slot="{ valid, errors }">
                <b-form-group
                        label="Email address:"
                        label-for="exampleInput1"
                        description="We'll never share your email with anyone else."
                >
                    <b-form-input
                            type="email"
                            disable-leading-trailing-space
                            v-model="email"
                            :state="errors[0] ? false : (valid ? true : null)"
                            placeholder="Enter email"
                    ></b-form-input>
                    <b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>
                </b-form-group>
            </ValidationProvider>

        <b-button type="submit" variant="primary">Submit</b-button>
            <b-button type="reset" variant="danger">Reset</b-button>
        </b-form>

        </div><!-- end of id registration_form-->
    </ValidationObserver>
</template>

JS 部分有:

<script>
    import { ValidationObserver, ValidationProvider } from "vee-validate";

    export default {
        name: "Register",
        components: {
            ValidationObserver,
            ValidationProvider
        },
        data: () => ({
            name: "",
            email: "",
            result:''
        }),
        methods: {
            onSubmit() {
                console.log("Form submitted yay!");
            },
            resetForm() {
                this.name = "";
                this.email = "";

                requestAnimationFrame(() => {
                    this.$refs.form.reset();
                });
            }
        }
    }; 
</script>

每当任何 form 输入处于无效状态时，我想在 div 中显示 id result消息无效数据".

Whenever any form input is in invalid condition, I want to show in div with id result the message 'Invalid data'.

有没有像 beforeSubmit 这样的事件或任何其他方式来完成?

Is there any event like beforeSubmit or any other way to accomplish that ?

我还想在前端发生任何验证错误时将窗口滚动到顶部 (window.scrollTo(0,0)).如何做到这一点?

I also want to scroll the window to the top (window.scrollTo(0,0)) whenever any validation error occurs in front end. How to do that ?

推荐答案

从 ValidationObserver 插槽道具中获取 failed 状态:

Grab the failed state from the ValidationObserver slot props:

<ValidationObserver ref="form" v-slot="{ failed, passes }">
  <div v-if="failed">Invalid Data</div>

<!-- rest of your fields -->
</ValidationObserver>

这篇关于BootstrapVue VeeValidate - 当表单无效时显示额外的错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！