autoscroll to empty but required q-input field in a form with validation Quasar 2.5.5 & Vuejs3

Question

I´ve a long form to fill out by the user with many required fields. So I used @submit.prevent,so that form can not be send if there are some missing required fields. Also I´ve in the q-inputs rules for the validations

If required fields are missing the first one come an red focused but cause the form is so long, the user don´t see that, if he is in "the bottom" of the form - that isn´t user friendly :(

I want that if the user is clicked the submit Button and forgot to fill out some required field, that the app is scroll automatically to this field.

here are some code snippet - hope you can help me :(

<q-form class="q-gutter-md"
            @submit.prevent="save">
  <div class="q-pa-md">
        <fieldset>
          <legend>Angaben zum Auftraggeber</legend>
          <div class="q-gutter-sm">
            <q-input v-model="abrufauftrag.auftraggeber.organisationsname"
                     outlined
                     :readonly="!isEditable"
                     :rules="validierungsRules.rulePflichtfeldMitMax1024Zeichen"
                     label="Firma/Organisation *"/>
            <q-input v-model="abrufauftrag.auftraggeber.anschrift.strasse"
                     outlined
                     :readonly="!isEditable"
                     :rules="validierungsRules.rulePflichtfeldMitMax1024Zeichen"
                     label="Straße *"/>
            <q-input v-model="abrufauftrag.auftraggeber.anschrift.hausnummer" outlined
                     :readonly="!isEditable"
                     :rules="validierungsRules.rulePflichtfeldMitMax1024Zeichen"
                     label="Nr. *"/>
            <q-input v-model="abrufauftrag.auftraggeber.anschrift.land" outlined
                     :readonly="!isEditable"
                     :rules="validierungsRules.rulePflichtfeldMitMax1024Zeichen"
                     label="Land *"/>
            <q-input v-model="abrufauftrag.auftraggeber.anschrift.plz" outlined
                     :readonly="!isEditable"
                     :rules="validierungsRules.rulePflichtfeldMitMax1024Zeichen"
                     label="PLZ *"/>
            <q-input v-model="abrufauftrag.auftraggeber.anschrift.ort" outlined
                     :readonly="!isEditable"
                     :rules="validierungsRules.rulePflichtfeldMitMax1024Zeichen"
                     label="Ort *"/>
            <q-input v-model="abrufauftrag.auftraggeber.telefonnummer" outlined
                     :readonly="!isEditable"
                     :rules="validierungsRules.ruleTelNummer"
                     label="Telefon"/>
          </div>
        </fieldset>
      </div>


     <q-btn :loading="formSaved" color="primary" label="Speichern"
               title="Speichern"
               type="submit"
        >
          <template #loading>
        <q-spinner-dots/>
     </template>
  </q-btn>

Answer 1

got it! :)

I used the @validation-error - Event from the Quasar QForm API to scroll to the invalid Element.

HTML:add @validation-error hook

    <q-form class="q-gutter-md"
                @submit.prevent="save"
                @validation-error="onValidationError">
    </q-form>

TypeScript: scroll to element

async function onValidationError(ref: any) {  
  const el = ref.getNativeElement()
  setVerticalScrollPosition(getScrollTarget(el), el.offsetTop, 1000)
}

Answer 2

You could use native scrollIntoView() Web API method.

Here is a working example:

  <q-form
    @validation-error="
      (ref) =>
        ref.$el.scrollIntoView({
          behavior: 'smooth',
          block: 'end',
          inline: 'nearest',
        })
    "
  >