自动滚动到具有验证功能的表单中的空但必填的 q-input 字段 类星体 2.5.5 和 Vuejs3

Question

我有一个长表单需要用户填写，其中包含许多必填字段。所以我使用了@submit.prvent，这样如果缺少一些必填字段，表单就无法发送。此外，我还了解验证的q输入规则

如果所需字段丢失，则第一个字段显示为红色焦点，但由于表单太长，如果用户处于"；底部"；形式——这对用户不友好：(

我希望，如果用户点击提交按钮，忘记填写一些必填字段，应用程序会自动滚动到此字段。

这里有一些代码片段-希望你能帮助我：(

<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

成功了！：(

我使用Quasar QForm API中的@validation-error-Event滚动到无效元素。

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)
}