Start validation after blur

[franciscolourenco]

In many cases, validation with live feedback on every keystroke is desirable. However, often you don't want to distract the user on the first attempt, only after the field has been completely filled and is invalid. In this cases we can't use the lazy directive on the field element because we need the live update for validation, but we don't want to activate the styling classes and warnings on the first keystroke.

An easy and simple option to make validation start only after blur would be great.

[geraldbiggs]

Hi, very quick comment here.

I use a computed property for this inside the component which wraps around all my inputs. If you weren't wrapping it inside a component, your usage will vary. errors () { return this.errors.touched ? this.errors.invalid && Object.keys(this.errors).length : false }

Then I use errors as the truthy test to show errors, or switch on an error class to highlight invalid entries.

So, basic example:

The form starts off with no errors. A user clicks a required field, enters nothing. Then clicks another field, an error shows.

If a user deletes everything in a required field the first time, it shows the error and red highlight AFTER they blur (preventing a premature error message). Subsequent edits, will flash the error message

[geraldbiggs]

@aristidesfl How does detect-change="off" differ from you are discussing?

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

[franciscolourenco]

If I understood detect-change and detect-blur correctly. The difference is that we want detect-change="off" initially, but detect-change="on" after the first detect-blur validation is executed.

[wangwenjie1314]

Please Test：

<div class="hi-form-group" :class="{'hi-form-error': $vform.phone.required || $vform.phone.phone || $vform.phone.phoneExist }">
    <input type="number" class="hi-form-field" v-model="user.phone" pattern="[0-9]*" autocapitalize="off" autocorrect="off" initial="off" detect-change="off" v-validate:phone="{required: true,phone: true, phoneExist: true }" placeholder="请输入手机号">
</div>

the most important config is:

initial="off" detect-change="off"

---

read more:

<!-- 'inital' attribute is applied the all validators of target element (e.g. required, exist) -->
<input id="username" type="text" initial="off" v-validate:username="['required', 'exist']">

设置标签上 initial="off" 该标签上所有验证初始化均不验证

---

<!-- 'initial' optional is applied with `v-validate` validator (e.g. required only) -->
<input id="password" type="password" v-validate:passowrd="{ required: { rule: true, initial: 'off' }, minlength: 8 }">

设置标签上 验证中的单个中 initial="off"，则初始化不验证该单个项

---

detect-blur and detect-change

vue-validator validate automatically when detect DOM event (input, blur, change) in formalable elements (input, checkbox, select, etc). In the case, use the detect-change, detect-blur attributes:

<input id="username" type="text" 
          detect-change="off" detect-blur="off" v-validate:username="{
          required: { rule: true, message: 'required you name !!' }
        }" />

detect-change="off" 关闭值改变马上验证

detect-blur="off" 关闭输入框失去焦点验证

[franciscolourenco]

@wangwenjie1314 thanks you for the example code, however if I'm not mistaken it just implements validation on blur. For that purpose a simple lazy attribute would be sufficient no? JSbin: http://jsbin.com/zezovejoxe/1/edit?html,css,js,console,output

I was talking about validation on-change to be activated, after the first validation on-blur occurred.

[kazupon]

I'll try to implement at v3.0.

[franciscolourenco]

With the implementation of automatic classes this can be easily achieved now, right? http://jsbin.com/dokuzicopa/edit?html,css,output

[kazupon]

Yeah, In v3, I'll plan to implement.

[franciscolourenco]

What exactly do you plan to implement? Did you have a look at the jsbin?

[bennettrogers]

@aristidesfl Thanks for the jsbin and for solving your own problem. This is exactly what I was looking for! 👍

[franciscolourenco]

Should we close this and maybe add the example to the docs?

[kazupon]

released v3.0.0-alpha.1 https://github.com/vuejs/vue-validator/releases/tag/v3.0.0-alpha.1

In 3.0 later, validation is default manually. we can use validation with event handling (blur/focusout, focus/focusin, etc) and any timing.