feat(forms): add inline blur validation for name and email

This commit is contained in:
Jennie Robinson Faber 2026-05-23 16:09:36 +01:00
parent 1079e8212f
commit 10f8cab6e3
3 changed files with 66 additions and 0 deletions

View file

@ -173,9 +173,12 @@
type="email"
placeholder="you@example.com"
autofocus
@blur="validateNewEmail"
@input="if (fieldErrors.email) fieldErrors.email = ''"
@keydown.enter="handleUpdateEmail"
@keydown.escape="cancelEmailEdit"
>
<p v-if="fieldErrors.email" class="field-error">{{ fieldErrors.email }}</p>
</div>
<div class="email-edit-actions">
<button
@ -317,6 +320,19 @@ const showEmailEdit = ref(false);
const newEmail = ref("");
const isUpdatingEmail = ref(false);
// Inline blur validation (UI feedback only does not block submission)
const fieldErrors = reactive({ email: "" });
const validateNewEmail = () => {
const value = newEmail.value.trim();
if (!value) {
fieldErrors.email = "";
return;
}
const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
fieldErrors.email = ok ? "" : "Please enter a valid email address.";
};
// Payment history state
const paymentHistory = ref([]);
const paymentHistoryLoading = ref(false);
@ -516,6 +532,7 @@ const handleUpdateCircle = async () => {
const cancelEmailEdit = () => {
showEmailEdit.value = false;
newEmail.value = "";
fieldErrors.email = "";
};
const handleUpdateEmail = async () => {
@ -823,6 +840,11 @@ const confirmCancelMembership = async () => {
.email-edit .field input:focus {
border-color: var(--candle);
}
.email-edit .field .field-error {
font-size: 11px;
color: var(--ember);
margin-top: 4px;
}
.email-edit-actions {
display: flex;
gap: 8px;