Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mstdmstd's avatar

How to clear validation error messages when I open modal editor for the second time?

In Laravel 12 / vuejs 3 app I use modal form with validation in edit and insert mode.

Problem is that when user clicks on edit button to open the model form and close it (even without editing/saving it) and next click on add button to create a new item the modal form is opened with 2 validation error messages(Not required)

Code for add button is in vue file :

<el-button type="primary" @click="openEdit(newModel, form)">Add Item</el-button>

export default {
    components: {RegionCreateDialog, ModelTable},
    mixins: [model],
    data() {
        return {
            ...
            newModel: {
                locations: [],
                location_id: null,
            }
        }
    },

Method openEdit is in common.js file, which methods are used in many editors:

methods: {
    openEdit(model, theForm) {
        console.log('openEdit model::', model)
        console.log('openEdit theForm::', theForm)

        // if (model) {
        this.form = { ...model };
        // }
        if (theForm) {
            theForm.errors = {};  // No errors - but I still have validation error messages

            // If to uncomment line below I got error :  Uncaught TypeError: Cannot read properties of undefined (reading 'clean')
            // theForm.$validator.clean();


            // If to uncomment line below I got error :  Uncaught TypeError: theForm.errors.clear is not a function
            // theForm.errors.clear();


            const initialState = {
                locations: [],
                location_id: null,
            }
            Object.assign(theForm, initialState); // No errors - but I still have validation error messages

            console.log('CLEARING ::')

        }

        this.showEditForm = true;
    },
    ...
}

I try to pass new model with empty values newModel and the form form and try to clear validation error messages - but no methods working, some raises errors (I show in the code above)...

How to clear them correctly ?

0 likes
1 reply
swez_k's avatar
theForm.errors = {};  // No errors - but I still have validation error messages

You will not get any errors since this is JS...

what is form ? is it a form helper from inertia or a different library? and where is the validation happening ? is it frontend validation or server validation?

Please or to participate in this conversation.