Vee-validate: Constraint Validation API integration

[diegoleme]

What do you think of integrating with the "Constraint Validation API" to use the invalid and: valid CSS pseudo-classes?

[logaretm]

I think they will be a very nice addition. will require some research though.

[Mouvedia]

Damn this just bit me hard. This should have been a breaking change!
@logaretm Is there any way to disable this? I was using :invalid to detect empty inputs.

In the meantime I cannot even downgrade to rc8 because I need 7216273520ee0c4b536daa7eb9ac15d6b28bd70e.

[logaretm]

It will be disabled by default in the next update, but you can disable it now using the validity configuration.

Like this:

Vue.use(VeeValidate, {
  validity: false
});

[jimmywarting]

This makes me sad that you try to re-invent the wheel.
So irritating every time that you must learn a new framework everytime when it exist natively in html5
instead of using constraint validation you make something new up by introducing

<input v-validate="{ required: true, email: true, regex: /[0-9]+/ }" type="text" name="email">

instead of just doing:

<input required type="email" name="email">

[logaretm]

@jimmywarting thanks for the suggestion, I wanted to implement this behavior for a while now. But wanted to focus on unifying the validation experience for both vue components and native elements.

I will try to implement this in the next version, thanks again for the suggestion.

[michapietsch]

@logaretm Thanks for considering this! That'd be awesome to use VeeValidate progressively, that is: use Constraint API as fallback if no other configuration given.

[logaretm]

I intend to load the rules from the specified input attrs if its an HTML element, and fit in some other stuff. will be working on this PR this weekend

[logaretm]

1250 is in progress

[michapietsch]

Why not use the Constraint API? Let the browser do the work and just read from the ready-to-use ValidityState object. E. g. if required and empty you will find a "valueMissing: true" in there.

[Mouvedia]

Here's why: https://github.com/baianat/vee-validate/issues/671#issuecomment-328950207

[michapietsch]

@Mouvedia: You want to use :valid and :invalid. That's even more reason to integrate with the Constraint API. But it's two different things. I am talking about retrieving existing HTML5 validation state from the API to build upon it. On the other hand: If additional validation is required and added it could be injected via setCustomValidity() to let the Constraint API represent the correct validity state and again you could use :valid and :invalid.

[Mouvedia]

@michapietsch: You didn't understand my use case. How would you handle the styling of empty inputs using the required attribute without having an invalid state on vee-validate side?
Since :placeholder-shown is not cross-browser the only way would be for vee-validate to automatically tag empty inputs with a class. Id say it's not its job but since it's already adding other useful classes, another one wouldn't hurt.

cf https://stackoverflow.com/q/3617020/248058

[michapietsch]

@Mouvedia I see. I really didn't get that from https://github.com/baianat/vee-validate/issues/671#issuecomment-328950207 since you used the :invalid pseudo-class which means the field had been invalid indeed. I can see how you'd like to apply different styles even to valid empty fields.