fix: validate Patch Test modal inputs

This commit is contained in:
2026-05-29 18:12:39 +01:00
parent 0750c7ac0e
commit c21a59d61d
@@ -39,6 +39,21 @@ import { Button } from '$lib/components/ui/button';
service_ids: [] as string[]
});
let formErrors = $state({
name: '',
notice_duration: '',
expiry: ''
});
function validateForm(): boolean {
formErrors = {
name: !formData.name.trim() ? 'Name is required' : '',
notice_duration: (formData.notice_duration_hours < 0 || isNaN(formData.notice_duration_hours)) ? 'Must be a positive number' : '',
expiry: (formData.expiry_months < 1 || isNaN(formData.expiry_months)) ? 'Must be at least 1 month' : ''
};
return Object.values(formErrors).every(err => err === '');
}
async function fetchData() {
loading = true;
try {
@@ -331,8 +346,11 @@ import { Button } from '$lib/components/ui/button';
type="text"
placeholder="e.g. Standard Glue Patch Test"
bind:value={formData.name}
class="w-full"
class="w-full {formErrors.name ? 'border-red-500' : ''}"
/>
{#if formErrors.name}
<p class="text-xs text-red-600">{formErrors.name}</p>
{/if}
</div>
<div class="space-y-2">
@@ -354,8 +372,11 @@ import { Button } from '$lib/components/ui/button';
type="number"
min="0"
bind:value={formData.notice_duration_hours}
class="w-full"
class="w-full {formErrors.notice_duration ? 'border-red-500' : ''}"
/>
{#if formErrors.notice_duration}
<p class="text-xs text-red-600">{formErrors.notice_duration}</p>
{/if}
<p class="text-xs text-gray-500">Hours prior to booking required</p>
</div>
@@ -366,8 +387,11 @@ import { Button } from '$lib/components/ui/button';
type="number"
min="1"
bind:value={formData.expiry_months}
class="w-full"
class="w-full {formErrors.expiry ? 'border-red-500' : ''}"
/>
{#if formErrors.expiry}
<p class="text-xs text-red-600">{formErrors.expiry}</p>
{/if}
<p class="text-xs text-gray-500">How long the test remains valid</p>
</div>
</div>
@@ -397,7 +421,12 @@ import { Button } from '$lib/components/ui/button';
<Button variant="outline" onclick={() => (showModal = false)} disabled={isSubmitting}>
Cancel
</Button>
<Button onclick={savePatchTest} disabled={isSubmitting || !formData.name.trim()}>
<Button
onclick={() => {
if (validateForm()) savePatchTest();
}}
disabled={isSubmitting}
>
{isSubmitting ? 'Saving...' : 'Save'}
</Button>
</Modal.Footer>