Validation concept?

[CaptainCannabis]

• I'm submitting a ...

  • bug report
  • feature request
  • [ x] support request => Please do not submit support request here, see note at the top of this template.

• What is the current behavior?

I got a form with a couple of different fields, a datepicker and a input with cleave format and so on. Each field is set to required=true and has at least one validation function which is defined in scope.

The form validation settings are

                validateAfterLoad : false,
                validateAfterChanged : true,

When i enter the form there are at least two emtpy inputs which have validation rules. I change the first of those an the formIsValidated event will run through. But it only checks the currently changed inputs. It is not iterating over the form. If i call the vfg.validate() manualy in that moment i get error messages on all invalid fields. What am i doing wrong?

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
  https://jsfiddle.net/ or similar (you can use this template as a starting point: https://jsfiddle.net/icebob/0mg1v81e/).

• What is the expected behavior?

I would expect that each time a field changes all fields of that form are validated,n not only the currently changed one.

• What is the motivation / use case for changing the behavior?

There could be more validation errors and the visibility of my submit button is coupled to the result of formValidation. That wont work with the actual situation.

• Please tell us about your environment:

latest version of vfg (not 3)

[CaptainCannabis]

I dont get why there are separate events for form and single field validation which are emitted as the same event "validated" without a property to distinguish which is sender.

EDIT: I guess my scenario is the "edge case" here but it would be nice to have more control over the validation concept. A flag for "should i validate the other inuts on change" would be nice. Atm i solved my case by setting validateAfterLoad and validateAfterChanged to false. In the parent component of the vfg-form i add an eventListener for all of the inputs of the form which calls "self.$children[0].vfg.validate();"

Another thing i noticed is that the cleave-input wont update the model-value if you cut it out. This won't trigger the "input"-event. See

vue-form-generator/src/fields/optional/fieldCleave.vue

Line 71 in 721a4ee

this.$el.removeEventListener("input", this.inputChange);