CODEWITHSUNDEEP
vue.jslaravel-5.6
Pankaj
Pankaj

Reputation: 10115

Modal form Validation errors persist when reopened

About the problem

I am using Laravel 5.6.7, Vue.js. I have modal div which being opened and closed on button click. I type something. Validation fires. I close the modal div. Then clicking button to open it. I see that the validation messages still there.

enter image description here

Component Template

<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>

Component Script 

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

My findings

if you check the input type text above, I added ref attribute. Tried the below code to set the value to false for aria-invalid attribute.

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

It sets the attribute value but validation errors are still there. Is there any proper way to get rid of workarounds like above?

I think, when I set the first value or I click on it...some attribute value is being set and due to that form errors occur.

Upvotes: 1

Views: 2976

Answers (1)

Jacob Goh
Jacob Goh

Reputation: 20845

Assuming that you are using vee-validate,

To clear all errors,

this.$validator.errors.clear();

To clear 1 single error only,

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

Add 1 of the code above to the modal close event listener and the error would be gone the next time you opened it..

Upvotes: 0

Related Questions