Watching form for validity

[Bond-Addict]

Does anyone know if its possible to watch the va-form for validity? I know you can manually call .validate() after creating a ref for the form, but I was wanting to have behavior like I could do in angular. If the form isnt valid I would like to either hide the submit button or disable it. So far I don't see a way in the docs. In angular you could just check for formGroup.invalid or formGroup.valid which would update automatically when all validation conditions were satisfied.

TIA!

[m0ksem]

Hi, @Bond-Addict. You can try to use useForm composable (available since v1.6.4).

<va-form ref="myForm" />

const { isValid } = useForm('myForm')

watch(isValid, console.log)

[Bond-Addict]

@m0ksem okay gotcha. Thanks for opening the issue to be worked on.
Apologies for all the issues and discussions on the library. I'm building a new app for work using this library as the only UI and I genuinely do enjoy everything yall have put together as it is far more complete and stable than other Vue UI alternatives.

[m0ksem]

@m0ksem okay gotcha. Thanks for opening the issue to be worked on. Apologies for all the issues and discussions on the library. I'm building a new app for work using this library as the only UI and I genuinely do enjoy everything yall have put together as it is far more complete and stable than other Vue UI alternatives.

Nice to hear that!
In case you want to see your feature requests faster in UI lib, you can help us to make a requirements right in this issue (I mean write down exactly what feature must do and how it must work). And obviously you can just take this issue and make whatever you need, so I can publish a new version for you as soon as you make everything you need.

[Mini-ghost]

@Bond-Addict

Hi!

I'm not sure if you'd like to try a third-party form validation library, such as Vorms.

I attempted to write a Vuestic UI example that incorporates form validation with Vorms. Vorms provides a dirty feature to check if the current values are equal to the initial values, which might meet your requirements.

Vorms Example - With Vuestic UI

[Bond-Addict]

@Mini-ghost thanks for the suggestion! I did check it out and it does look good! I appreciate the plug as I see you're one of the contributors lol I might end up using this. Ultimately it would be nice for more advanced validation to implemented into Vuestic its self. There is at least a team discussion started #3502. Maybe this will be another option that they could implement.
Is there any advantage that you see using Vorms over Vuelidate? This was another suggestion that was given.

Regardless, nice work!

[Mini-ghost]

@Bond-Addict

Thank you for your approval.

If developing with Vuestic UI and Vorms, I highly recommend using Smart Form Components. By encapsulating the form field components of Vuestic UI, it enhances usability and convenience. This approach simplifies the form handling process, improves development efficiency, and helps maintain clean and manageable code.

Since I'm not sufficiently familiar with the intricacies of using Vuelidate, I cannot provide an objective opinion. However, the most significant difference is that Vorms does not come with built-in rules, but it does offer integration with third-party schema validation libraries like yup and zod.

Vuelidate is indeed an excellent validation library, with its API syntax being completely distinct from Vorms. Ultimately, the choice between the two comes down to personal preference.