fix: validate Patch Test modal inputs
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user