IE Edge Validation doesn't work after initial validation error

[rajesh-gs]

Versions

• vee-validate: 2.1.7
• vue: 2.6.6

Describe the bug
In IE Edge (Microsoft Edge 42.17134.1.0) After raising a required error, Vee-validate doesn't realise that the user has inputted value in the field. And it keeps on displaying the validation error

this is what I have in
app.js
Vue.use(VeeValidate, { validity: true, useConstraintAttrs: false, events: 'change|blur|custom', fieldsBagName: 'validationFields'})

in vue
<b-form-input type="text" name="username" v-validate="'required'" id="username" v-model.trim="username" placeholder="user name"></b-form-input><span class="text-danger">{{ errors.first('username') }}</span>
<b-form-input type="password" name="password" v-validate="'required'" id="password" v-model.trim="password" placeholder="password"></b-form-input><span class="text-danger">{{ errors.first('password') }}</span>

in computed:
var self = this; self.$validator.validate().then(result => { if (result) { return this.logIn({ username: self.username, password: self.password, }) ....
To reproduce
Steps to reproduce the behavior:

1. create a vue with two fields (username and password, as above) and a submit button. and add scripts as is
2. run vue & open link in IE Edge
3. when the login form shows up, directly hit SUBMIT using mouse. this should trigger required validation error
4. now type username into the username field. Notice that the validation error doesnt go away
5. hit SUBMIT (with only username filled). It will show an error that username is empty (which it isnt)
6. Now type in password (same behaviour as 4)
7. hit SUBMIT (with both username and password filled). Notice the same error as in 5.
8. Reload the page and type username and password and then hit SUBMIT. It will work properly

Expected behavior
validation should work on change across browsers

Desktop (please complete the following information):

• OS: Win10
• Browser IE Edge
• Version 42.x

Reproduction link
https://codesandbox.io/s/k9xw06pwqv

[logaretm]

I see you are using b-form-input components, I don't want to guess which library is that from or is it a custom one?

Creating a live example would greatly help me debug this, please create one using jsfiddle or codesandbox.

[rajesh-gs]

its standard bootstrap-vue component

[logaretm]

Looks like bootstrap-vue inputs don't emit the changed event in IE Edge which prevents validation on change for your components. You can test in their docs You may want to raise an issue there.

Still, there is still an issue with custom validity for IE Edge which prevents correctly picking up the values when you submit a second time, I have fixed that in the commit.

[DM2489]

The Bootstrap-Vue Edge issue should be fixed today - it's referenced in this issue bootstrap-vue/bootstrap-vue#1988.

Bootstrap-vue will be bumped to rc12 today (bootstrap-vue/bootstrap-vue#2476.)

[logaretm]

@DM2489 Thanks for the follow-up, good news 👍