search

kazupon / vue-validator

:white_check_mark: Validator component for Vue.js
MIT License
2.19k stars 431 forks source link

initial="off" has issues - suggestion of new field method #292

Open hootlex opened 8 years ago

hootlex commented 8 years ago

I was using initial="off" to all the forms which needed validation. I experienced a lot of issues (that I can't reproduce right now) and ended up using initial="on".

The main drop off of initial validation is that error messages are displayed before user interaction. To bypass this, I created a helper method which defines if an error should be shown.

shouldShowError(element, rule){
    return (element.touched || element.dirty) && element[rule];
}
<div class="help-block">
    <p v-if="shouldShowError($validation.address, 'email')">Invalid mail address format.</p>
    <p v-if="shouldShowError($validation.address, 'required')">Email required.</p>
</div>

So, I thought that it would be great to have a field method, which would actually do this check out of the box. For example $validation.address.required.dirty or $validation.address.notInitial('required').

What do you say about that?

kazupon commented 8 years ago

Thank you for your feedback.

Yeah, you’re right. vue-validator v2 have some issues around the validation.

I'll try to improve the vue-validator v3, and it support the vue 2.0 please waiting. :)

hootlex commented 8 years ago

Sure, no problem. :)

Consider adding an errorDisplay helper in v3. Also, a showAllErrors method would be a nice to have.

Good job with vue-validator so far.

Chalkin commented 8 years ago

Yes, adding such a functionality comes in really handy. I got the same problem. If you add this to v3 would be great - but please also add it to v2 as well. At my current project I'm using laravel spark which uses vuejs 1.x and I'm bind to that - unless Taylor Otwell updates Spark to use vuejs 2 I'm stuck to vuejs 1.x and so are many others (for various reasons)