Skip to content

How to use validation results? #45

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
blackfyre opened this issue Aug 23, 2016 · 9 comments
Closed

How to use validation results? #45

blackfyre opened this issue Aug 23, 2016 · 9 comments

Comments

@blackfyre
Copy link

blackfyre commented Aug 23, 2016

Hi!

Is there a way to access the validation results?

The intention is to enable the disabled submit button once all validation requirements are met.
I know that there's the onValidated method for every field, but I can't access anything other than the model, the errors and the field itself and nothing from the parent component.

Is there a way to do this without hacking on the model?

And on that note... How to trigger the form validation?

@icebob
Copy link
Member

icebob commented Aug 23, 2016

Yes, the vue-form-generator has an errors property. This contains the validation errors.
You can reach it with $refs.

Example: https://github.com/icebob/vue-form-generator/blob/master/dev/app.vue#L76

In template set a ref:

vue-form-generator(:schema='schema', :model='model', v-ref:form)

In script:

 let validationErrors = this.$refs.form.errors;

@blackfyre
Copy link
Author

Again, Wonderful! And Thank You!

@blackfyre
Copy link
Author

Well... almost... I get fragmented instance errors when using v-ref...

<template>
  <div>
    <modal title="Modal title">
      <vue-form-generator :schema="schema" :model="model" :options="formOptions" v-ref="form"></vue-form-generator>
       <div slot="footer">
          <button class="btn btn-default" @click="toggleModal">Cancel</button>
          <button class="btn btn-success" @click="sendModel">Create</button>
        </div>
    <modal>
  </div>
</template>

@blackfyre blackfyre reopened this Aug 23, 2016
@icebob
Copy link
Member

icebob commented Aug 23, 2016

Could you show the error message?

Otherwise, the v-ref syntax is v-ref:form
http://vuejs.org/api/#v-ref

@blackfyre
Copy link
Author

Standard vue fragmented instance error for the v-ref, with the link to the
documentation.
I can post the exact error tomorrow.

On Tue, 23 Aug 2016, 21:38 Icebob, [email protected] wrote:

Could you show the error message?


You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
#45 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AB5i8j4mObjdtZyqNDiVw6GV8_xAKjTUks5qi0xNgaJpZM4Jq6XR
.

Galicz Miklós
http://blackfyre.ninja/

@blackfyre
Copy link
Author

vue.common.js?4a36:1019 [Vue warn]: Attribute "v-ref" is ignored on component because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance

@icebob
Copy link
Member

icebob commented Aug 24, 2016

I think because your are using in modal so when the modal is not visible, the ref not exists too.
I'm thinking, how we can solve it.

@blackfyre
Copy link
Author

Your theory is certainly possible, but I cannot confirm it, as I had to find a solution fast, and moved to an SPA architecture in favour of throwing modal boxes.

@lionel-bijaoui
Copy link
Member

lionel-bijaoui commented Aug 26, 2016

I found a solution, here is my PR #52.
It seem like a fieldset don't count as a root element for Vue. I added a div and it fix everything.
I hope it can help @blackfyre too.
BTW the new vue-multiselect field has a similar problem.

@icebob icebob closed this as completed Aug 30, 2016
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

3 participants