[Solved] How to apply Quasar internal validation to q-dialogs

[Mickey58]

I’ve started to play with validation. I saw that it needs a q-form to work.

I have a few q-dialogs in my existing code that would benefit from validation. From reading the validation docs, internal validation seems not to work directly with q-dialogs.

My q-dialogs are simple - each has one q-card, made up of one q-card section with one q-input field plus another q-card section with 2 q-btns, which, @click,call “onCancel” or “onSubmit” methods.

How would I have to change those q-dialogs to use internal validation?

Insert a q-form in between the q-dialog and the q-card?

And re-wire my existing submit method on the q-dialog “submit” button with that q-form through <q-form @submit=“onSubmit”> to enforce validation is fulfilled prior to getting the onSubmit code being executed?

Just checking to make sure I understand the concept correctly before I change all my code.

[Mickey58]

I have implemented what I suggested above (putting the q-form inside the q-dialog “wrapper”, and the result is this:

• The q-form wrapped by the q-dialog has a problem for some unknown reason, maybe unrelated to validation: The dialog that has the q-form inside is triggered as before and renders the q-form, but it is not possible to enter input into the q-input field inside the q-form (wrapped by the q-dialog)!

• To verify whether validation works on the q-form alone, I also did a quick sniff test removing the q-dialog around the q-form. In this case the form is displayed (at the bottom of the screen) and I can enter values into the input field inside. Those values are validated as intended. Only if the input is valid, the onSubmit method (for the “type=submit” button) is triggered. So, validation works on the q-form, however without the q-dialog wrapper around.

In both variants, the q-cards inside the q-form are the same, untouched from my original code that has the q-dialog only.

I need the validation to work inside my q-dialogs. Does anyone know how to achieve that?

[Mickey58]

I solved the problem based on Quasar doc on https://quasar.dev/vue-components/dialog:

The <q-form> inside the <q-dialog> MUST be wrapped by a <div> - with that validation inside my q-dialog works as desired!