The QForm component renders a <form> DOM element and allows you to easily validate child form components (like QInput, QSelect or your QField wrapped components) that have the internal validation (NOT the external one) through rules associated with them.

QForm API

Usage

In order for the user to be able to activate the @submit or @reset events on the form, create a QBtn with type set to submit or reset:

<div>
  <q-btn label="Submit" type="submit" color="primary"/>
  <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
</div>

Alternatively, you can give the QForm a Vue ref name and call the validate and resetValidation functions directly:

<q-form ref="myForm">

// and then in code:

this.$refs.myForm.validate().then(success => {
  if (success) {
    // yay, models are correct
  }
  else {
    // oh no, user has filled in
    // at least one invalid value
  }
})

// to reset validations:
this.$refs.myForm.resetValidation()

Turning off Autocompletion

If you want to turn off the way that some browsers use autocorrection or spellchecking of all of the input elements of your form, you can also add these pure HTML attributes to the QForm component:

autocorrect="off"
autocapitalize="off"
autocomplete="off"
spellcheck="false"

Submitting to a URL (native form submit)

If you are using the native action and method attributes on a QForm, please remember to use the name prop on each Quasar form component, so that the sent formData to actually contain what the user has filled in.

<q-form action="https://some-url.com" method="post">
  <q-input name="firstname" ...>
  <!-- ... -->
</q-form>

• Control the way the form is submitted by setting action, method, enctype and target attributes of QForm
• If a listener on @submit IS NOT present on the QForm then the form will be submitted if the validation is successful
• If a listener on @submit IS present on the QForm then the listener will be called if the validation is successful. In order to do a native submit in this case:

<q-form action="https://some-url.com" method="post" @submit="onSubmit">
  <q-input name="firstname" ...>
  <!-- ... -->
</q-form>

methods: {
  onSubmit (evt) {
    console.log('@submit - do something here', evt)

    evt.target.submit()
  }
}