[Vuejs]-Vue Validator only after change / blur / submit

by

0👍

✅

Argh, the Google-able word isn’t about blur, or on submit – its about timing and initial:

http://vuejs.github.io/vue-validator/en/timing.html

<input id="first_name" initial="off" placeholder="e.g. Christopher" class="" v-validate:first_name="[&#039;required&#039;]" v-model="first_name" name="first_name" type="text">

0👍

you need to add .dirty or .touched to your validation

    <label for="first_name">First name:
    <span  v-if="$validation1.first_name.required && $validation1.first_name.touched" class="invalid">Enter your first name.</span>                            
    <input id="first_name" placeholder="e.g. Christopher" class="" v-validate:first_name="[&#039;required&#039;]" v-model="first_name" name="first_name" type="text">
</label>

0👍

I was dealing with a similar problem. I had to have an initialized variable for the input name: "" but I also wanted to have a required attribute in element.

So I add required when the event onblur occurs.

<input name="name" type="number" v-model="name" @blur="addRequired" />

const app = Vue.createApp({
    data() {
        return {
            name: ""
        }
    },
    methods:{
        addRequired: function(event){
            event.target.setAttribute("required", true);
        }
    }
});

Leave a comment