simple-vue-validator icon indicating copy to clipboard operation
simple-vue-validator copied to clipboard

Validation multicomponent form

Open SlivaNilow opened this issue 6 years ago • 1 comments
trafficstars

Hi, thx for awesome validator. But im have trouble.. when in try validate multicomponent form, child not validate if this.validate has error below child component
for example

<component>
   field=name
   field=email
   field=avatar
   ..
   <child-component ref="child">
     field=isProduct,
     field=isDemo,
     field=allFiles,
     <products-component v-if="isProduct" ref="products">
          field=files
          <product-add-component>
     </products-component>
     field=anotherData0
     ....
     field=anotherDataN
     <demos-component v-if="isDemo" ref="demos">
          field=demos
           <demo-add-component>
     </demos-component>
   </child-component>
    field=agree
</component>

in child-component i have validate rules like

'allFiles': function (value) {
      return Validator.custom(function () {
                    if (this.isProduct) {
	                    return this.$refs.products.$validate().then(function(success){
	                        if (!success)
	                            return 'no products';
		            });
                     }
        }, this)
 },

in products component i have validate rules like

'files' : function(value) {
      return Validator.value(value).greaterThan(0);
}

so then in main component im use

child = this.$refs.child.$validate();
component = this.$validate();

Promise.all([child, component]).then(function(results){
})

errors from child component show if field=agree is valid and not show if field=agree invalid

SlivaNilow avatar Feb 27 '19 15:02 SlivaNilow

I think i kinda have the same issue, but instead of child component it's same level components.

I wanted to create a separate shaking animation when invalid on submit. So in my method i called the $validate twice for separate fields.

I called this in my submit method first

this.$validate("form.fullName").then(function(success)

and then this

this.$validate("form.email").then(function(success)

but instead of checking them separately it just sort of assume i was trying to this.$validate() which calls all the field. The end result is that both of my components validating in sync, causing the email component to looks like it's valid even though it's not.

I suspect this is because of using promise right? is there a way to call $validate without using promise?

mikeychowy avatar Oct 10 '19 16:10 mikeychowy