simple-vue-validator
simple-vue-validator copied to clipboard
Validation multicomponent form
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
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?