Skip to content

More control over the validation process #109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
cristijora opened this issue Feb 11, 2017 · 3 comments
Closed

More control over the validation process #109

cristijora opened this issue Feb 11, 2017 · 3 comments

Comments

@cristijora
Copy link
Collaborator

cristijora commented Feb 11, 2017

Great component, but I would suggesting having the validation process more open to the ones who use the form generator.
After reading the docs and looking in the source cod I didn't find a good way of validating my generated form exactly when I want. The only implicit way was to declare a submit input which in many real cases doesn't have to be right bellow the inputs.
Another approach would be to declare a ref="myForm" and call this.$refs.myForm.validate() in my custom form submit function. This approach doesn't seem clean to me and might get ugly when you have multiple forms.
I suggest maybe adding an event which will pass the errors array or boolean up to the parent component.
Example:

<vue-form-generator 
     @errors-changed="handleErrors">
</vue-form-generator>

//parent component
data:function(){
 return{
  isValidForm:false,
 }
},
methods:{
  handleErrors:function(errors){
    this.isValidForm = errors.length===0;
   },
  myCustomSubmit:function(){
    if(this.isValidForm){
      //proceed with my form submission
   }
 }
}

Or alternatively

<vue-form-generator 
     @on-validate="handleValidation">
</vue-form-generator>

//parent component
data:function(){
 return{
  isValidForm:false,
 }
},
methods:{
  handleValidation(isValid){
   this.isValidForm = isValid;
  }
}

Necessary code change

validate() {
  // console.log("Validate!", this.model);
  this.clearValidationErrors();

  each(this.$children, (child) => {
    if (isFunction(child.validate))
    {
      // console.log("Validate ", child.model)
      let err = child.validate();
      each(err, (err) => {
        this.errors.push({
          field: child.schema,
          error: err
        });
      });
    }
  });
  let isValid = this.errors.length == 0;
  this.$emit('on-validate',isValid );
  return isValid;
},
@icebob
Copy link
Member

icebob commented Feb 15, 2017

Good idea. I support the second solution with "on-validate" event.

@icebob
Copy link
Member

icebob commented Feb 21, 2017

Other improvements:

If validateAfterChanged true, the fields run validate and the errors put to the this.schema.errors.

  • doesn't modify the schema. Put to the local data and call an on-validate event which listen the parent.
  • formGenerator listen the children on-validate event and append the errors to the self this.errors. Plus call self on-validate.
  • call the disabled, required, visible & readonly schema functions with field instance as this (Disable submit button #128), plus pass schema as second argument & field instance as third argument

@icebob
Copy link
Member

icebob commented Feb 21, 2017

I'll do it.

@icebob icebob added this to the v2.0.0 milestone Feb 21, 2017
@icebob icebob closed this as completed Feb 27, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants