how to clear validation span element on keydown

Published 1 week ago by nhayder

i'm submitting a form with vue js,

            <div class="flex flex-wrap -mx-3 mb-3">
                <div class="w-full px-3 mb-6 md:mb-0">
                  <label class="block uppercase" >
                    @lang('translation.name')
                  </label>
                  <input class="w-full " type="text" name="name" v-model="name" >

                  <span v-if="errors.name" class="text-red text-xs">@{{errors.name[0]}}</span> // validation text

                </div>
            </div>

in app.js


// this is the errors object  errors      :               []

        addNewPage : function(){ 
            axios.post('/api/newpage', {

                // data to send
                name        : this.name,
                direction   : this.direction,
                language_id : this.language_id,
            })

            // success
            .then( response => alert('Success'))

            // errors
            .catch( error => {

                if (error.response.status == 422) {

                  this.errors = error.response.data.errors

                }

            })

            event.target.reset();

        },

if the form has erros laravel will show errors in the span element above, So my question how to clear the validation errors on @keydown for every input

Best Answer (As Selected By nhayder)
D9705996

You can just add the keydone on each input.

<input  @keydown="errors.name = null" class="w-full " type="text" name="name" v-model="name" >

If you want to add this automatically to all of you inputs the easiest way is to extract you input to a component where you pass the name as a prop but I tried this approach and found it didn't really help much so went back to just adding the key down event on each input.

D9705996
D9705996
1 week ago (127,290 XP)

You can just add the keydone on each input.

<input  @keydown="errors.name = null" class="w-full " type="text" name="name" v-model="name" >

If you want to add this automatically to all of you inputs the easiest way is to extract you input to a component where you pass the name as a prop but I tried this approach and found it didn't really help much so went back to just adding the key down event on each input.

nhayder
nhayder
1 week ago (21,990 XP)

@D9705996 that was easy :-)

Please sign in or create an account to participate in this conversation.