31 lines
923 B
Markdown
31 lines
923 B
Markdown
|
# Polish: Form Validation
|
||
|
|
|
||
|
|
## Pattern
|
||
|
|
```typescript
|
||
|
|
const isSubmitting = ref(false)
|
||
|
|
const passwordErrors = computed(() => {
|
||
|
|
const errors: string[] = []
|
||
|
|
if (password.value.length > 0 && password.value.length < 8)
|
||
|
|
errors.push('Must be at least 8 characters')
|
||
|
|
return errors
|
||
|
|
})
|
||
|
|
|
||
|
|
async function submit() {
|
||
|
|
if (isSubmitting.value) return
|
||
|
|
isSubmitting.value = true
|
||
|
|
try { await rpcClient.call(...) }
|
||
|
|
catch (err) { errorMessage.value = formatError(err) }
|
||
|
|
finally { isSubmitting.value = false }
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Checklist per form
|
||
|
|
- Real-time validation as user types (debounced 300ms)
|
||
|
|
- Submit button disabled during operation and when validation fails
|
||
|
|
- All text inputs trimmed before submission
|
||
|
|
- Error messages are user-friendly (no raw error strings)
|
||
|
|
- TOTP: `inputmode="numeric"`, auto-submit at 6 digits
|
||
|
|
|
||
|
|
## Forms to polish
|
||
|
|
Login.vue (password setup, TOTP), Settings.vue (password change), any other form inputs.
|