How to prevent Quasar q-form submit when q-field has validation error?-CodePudding

I'm trying to implement vue-phone-input by wrapping it with a Quasar q-field.

It's mostly working. The input works fine and it shows validation errors underneath the input.

The problem is that I can submit the form even if there is a validation error.

How do I prevent this from happening?

Normally when using a q-form with a q-input and q-btn it will automatically stop this from happening.

So why doesn't it work here with q-field and vue-tel-input?

<template>
  <q-form @submit="handlePhoneSubmit">
    <q-field
      v-if="isEditingPhone"
      autocomplete="tel"
      label="Phone"
      stack-label
      :error="isPhoneError"
      error-message="Please enter a valid phone number."
      outlined
      hide-bottom-space
    >
      <vue-tel-input
        v-model="phoneInput"
        @validate="isPhoneError = !isPhoneError"
      ></vue-tel-input>
    </q-field>
    <q-btn
      color="primary"
      text-color="white"
      no-caps
      unelevated
      style="max-height: 56px"
      type="submit"
      label="Save"
      @submit="isEditingPhone = false"
    />
  </q-form>
</template>

<script setup lang="ts">
import { ref, Ref } from 'vue';
import { VueTelInput } from 'vue-tel-input';
import 'vue-tel-input/dist/vue-tel-input.css';

const phone: Ref<string | null> = ref('9999 999 999');
const isEditingPhone = ref(true);
const isPhoneError = ref(false);
const phoneInput: Ref<string | null> = ref(null);
const handlePhoneSubmit = () => {
  phone.value = phoneInput.value;
  console.log('Form Saved');
};
</script>

CodePudding user response：

First, you should use the :rules system from Quasar instead of :error and @validate

<q-field :rules="[checkPhone]" 

function checkphone(value: string) {
  return // validate the value here
}

Then, if the submit doesn't suffice, you may need to set a ref on your <q-form, then call its validate() method.

Here how to do it (I removed parts of the code to highlight what's required).

<template>
  <q-form ref="qform" @submit="handlePhoneSubmit">
  //..
  </q-form>
</template>

<script setup lang="ts">
import { QForm } from "quasar";
import { ref } from "vue";

//..

const qform = ref<QForm|null>(null);

async function handlePhoneSubmit() {
  if (await qform.value?.validate()) {
    phone.value = phoneInput.value;
  }
}