vue-generators / vue-form-generator

:clipboard: A schema-based form generator component for Vue.js
MIT License
3k stars 530 forks source link

Validation concept? #682

Open CaptainCannabis opened 4 years ago

CaptainCannabis commented 4 years ago

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?

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

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.

latest version of vfg (not 3)

CaptainCannabis commented 4 years ago

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 https://github.com/vue-generators/vue-form-generator/blob/721a4eebbde77040a1318e60aa9ef21229bbcf99/src/fields/optional/fieldCleave.vue#L71