As the title suggests, I am facing an issue with custom validation on my q-checkbox. The standard Quasar validation method is not working for me.
Below are my checkboxes with custom DIVs for displaying error messages:
<q-item style="padding-left: 0; padding-bottom: 0; margin-left: 0">
<q-checkbox
id="acceptedPrice"
v-model="acceptedPrice"
label='I have read and agree to the "Prices / Terms of Participation" category.'
style="padding-bottom: 0;"
/>
</q-item>
<div v-if="showError"
style="padding: 8px 0 2px 16px; line-height: 1; min-height: 0;
color: #C10015; font-size: 13px;">
Please check the mandatory field.
</div>
<q-item style="padding-left: 0; padding-bottom: 0; margin-left: 0">
<q-checkbox
id="acceptedAgreement"
v-model="acceptedAgreement"
label='I have read and agree to the "Consent" category and consent to the use of my data.'
style="padding-bottom: 0;"
/>
</q-item>
My TypeScript code:
const acceptedPrice = ref<boolean>(false);
const acceptedAgreement = ref<boolean>(false);
const showError = ref<boolean>(false);
async function onsubmit() {
if (acceptedPrice.value !== true && acceptedAgreement.value !== true) {
showError.value = true;
}
if (acceptedPrice.value === true && acceptedAgreement.value === true) {
const success = await buildingBoomForm.value?.validate();
if (success === true) {
Notify.create({
color: 'positive',
icon: 'cloud_done',
message: 'Form successfully submitted!'
});
}
}
}
The error message now appears when the user forgets to check the boxes, but it does not react as I would like it to. It should disappear once the boxes are checked.
I tried using a computed property but couldn't get it to work properly. I also considered using watchers, but I don't think it's suitable for this case.