fix(person): block submit while a life-date input is partial

A partial date (e.g. "14.03.") left the hidden ISO input empty, so
saving the edit form silently cleared a stored date. PersonLifeDateField
now delegates to the shared DateInput primitive (inline format error,
calendar validation) and sets a custom validity while the error is
present, so the browser blocks native submission for both person forms.
A full clear stays submittable - that is the intentional clear path.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-12 19:31:39 +02:00
committed by marcel
parent 4419c434a1
commit e712477d2b
4 changed files with 107 additions and 18 deletions

View File

@@ -0,0 +1,64 @@
import { describe, it, expect, afterEach } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page, userEvent } from 'vitest/browser';
import PersonLifeDateField from './PersonLifeDateField.svelte';
import { m } from '$lib/paraglide/messages.js';
afterEach(cleanup);
const baseProps = {
name: 'birthDate',
legend: 'Geburtsdatum',
precisionLabel: 'Genauigkeit'
};
const visibleInput = () => page.getByLabelText('Geburtsdatum', { exact: true });
const hiddenIso = () => document.querySelector<HTMLInputElement>('input[name="birthDate"]');
describe('PersonLifeDateField', () => {
it('shows the format error and flags the input invalid for a partial date', async () => {
render(PersonLifeDateField, { props: baseProps });
await userEvent.fill(visibleInput(), '14.03.');
await expect.element(page.getByText(m.form_date_error())).toBeVisible();
const input = (await visibleInput().element()) as HTMLInputElement;
expect(input.checkValidity()).toBe(false);
expect(hiddenIso()?.value).toBe('');
});
it('clears error and custom validity when the input is fully emptied', async () => {
render(PersonLifeDateField, { props: { ...baseProps, initialIso: '1899-03-14' } });
await userEvent.fill(visibleInput(), '');
await expect.element(page.getByText(m.form_date_error())).not.toBeInTheDocument();
const input = (await visibleInput().element()) as HTMLInputElement;
expect(input.checkValidity()).toBe(true);
// Empty hidden ISO is the intentional clear path — the server action omits the pair.
expect(hiddenIso()?.value).toBe('');
});
it('keeps a stored date submittable when untouched', async () => {
render(PersonLifeDateField, {
props: { ...baseProps, initialIso: '1899-03-14', initialPrecision: 'DAY' }
});
await expect.element(visibleInput()).toHaveValue('14.03.1899');
const input = (await visibleInput().element()) as HTMLInputElement;
expect(input.checkValidity()).toBe(true);
expect(hiddenIso()?.value).toBe('1899-03-14');
});
it('becomes valid again once the partial date is completed', async () => {
render(PersonLifeDateField, { props: baseProps });
await userEvent.fill(visibleInput(), '14.03.');
await userEvent.fill(visibleInput(), '14.03.1899');
await expect.element(page.getByText(m.form_date_error())).not.toBeInTheDocument();
const input = (await visibleInput().element()) as HTMLInputElement;
expect(input.checkValidity()).toBe(true);
expect(hiddenIso()?.value).toBe('1899-03-14');
});
});