模态表单验证错误在重新打开时仍然存在

Question

关于问题

我正在使用 Laravel 5.6.7、Vue.js。我有模态 div ，它在单击按钮时打开和关闭。我打字。验证触发。我关闭模式 div。然后单击按钮将其打开。我看到验证消息仍然存在。

组件模板

<template>
    <div>
        <form role="form">
            <input name="LastName" type="text" ref="LastName" v-validate 
                                    data-vv-rules="required" v-model="createForm.LastName">

            <p v-if="errors.has('LastName')">{{ errors.first('LastName') }}</p>

            <button v-else type="button" @click="validateBeforeSubmit()">
                Create
            </button>
        </form>
    </div>
</template>

组件脚本

<script>
    export default {
        data() {
            return {
                createForm: {
                    LastName: ''
                }
            };
        },
        created() {
            this.InitializeForm();
        },
        methods: {
            InitializeForm() {
                this.createForm.LastName = "";                
            },
            validateBeforeSubmit() {
                this.$validator.validateAll();
            }
        }
    }
</script>

我的发现

如果你检查上面的输入类型文本，我添加了 ref 属性。尝试使用以下代码将 aria-invalid 属性的值设置为 false。

this.$refs.LastName.setAttribute("aria-invalid", "false");

它设置了属性值，但验证错误仍然存在。有什么正确的方法可以摆脱上述变通办法吗？

我认为，当我设置第一个值或单击它时...正在设置某些属性值，因此会出现表单错误。

Answer 1

假设您正在使用 vee-validate,

要清除所有错误，

this.$validator.errors.clear();

只清除 1 个错误，

this.$validator.errors.remove('LastName');

将上面的代码之一添加到模态关闭事件侦听器中，下次打开时错误将消失..

模态表单验证错误在重新打开时仍然存在

Modal form Validation errors persist when reopened

vue.js

laravel-5.6