random summit
This is my first time working with the Astro Actions API and I am a bit confused by how the validation errors are working. I have a schema with required fields. If the form is submitted with all fields empty my expectation would be that the Required validation messages would be rendered. However that is not the case. If a user submits and empty form I see the default behavior of the form (no client-side JS is being used). I have attached the form and action definition below. At the moment the only thing I can think is that client-side JS is required for this specific case, but if someone knows a better way or how to achieve this a nudge in the right direction would be much appreciated.
---
import { actions, isInputError } from 'astro:actions'
const result = Astro.getActionResult(actions.sendEmail)
const inputErrors = isInputError(result?.error) ? result.error.fields : {}
console.log('[SERVER SIDE] Input errors:', inputErrors)
---
<form
action={actions.sendEmail}
enctype='multipart/form-data'
id='contact_form'
name='contact_form'
method='POST'
novalidate
>
<FormField
errors={inputErrors}
invalid={Boolean(inputErrors.name)}
label='Your Name'
name='name'
placeholder='Bob Barker'
required
type='text'
/>
<button type='submit'>Submit</button>
</form>
import { defineAction } from 'astro:actions'
import { z } from 'astro:schema'
import { sendEmail } from '@/lib/email'
const schema = z.object({
name: z.string().min(2, '...').max(100, '...').regex(
/^[a-zA-Z\s'-]+$/,
'...'
),
})
export const server = {
sendEmail: defineAction({
accept: 'form',
input: schema,
async handler(input, _ctx) {
try {
return await sendEmail(input)
} catch (error) {
console.log('Handler error:', error)
return {
success: false,
error: error,
}
}
},
}),
}
grand mulch
hasty quiver
