Using the ariaRequired on a Form Field in Cloudscape

[JSignature]

New to cloudscape trying to build a Form that will prevent the user from submitting the form if a required field is blank. Seems like the ariaRequired Boolean is what I need. I placed it in the Form Field hoping it would prevent the Form from being submitted but the form still goes thru. A check in the console of the event shows ariaRequired=true. Not sure what I am missing to get this implement. Searched the docs but a answer did not click and wasnt able to find any examples in the provided code that utilized required fields. Sry about the poorly formatted question and code .... still new to this

const [ticketValue, setTicketValue] = React.useState(null)

<form onSubmit={(e) => onSubmit(e)}>
  <Form
    actions={
      <SpaceBetween direction='horizontal' size='xs'>
      <Button variant='primary'>Submit</Button>
      </SpaceBetween>
    }
     >
    <FormField
      label='Ticket Link'
      ariaRequired
      errorText={
        regexTicket.test(ticketValue) ? null : 'Please enter a ticket number'
      }
    >
      <Input
        onChange={({ detail }) => setTicketValue(detail.value)}
        value={ticketValue}
      />
    </FormField>
  </Form>
</form>

[taheramr]

Hello,

No worries, your question is totally fine and don't hesitate on asking questions to us and we'll come back to you as soon as we could!

As for the validation we leave this part to be entirely controlled by your side, so in your sample you'll have to implement a way to validate after the user submits, so in this case:

• When use submit, the on submit will check if all required or fields with requirements are met
• If anything is invalid, you'll not proceed and you'll show errors.

This is one way of doing so, you can also rely on external validation libraries like zod and yup to carry out such validations and get error messages for you, we have a general guideline here that you can follow https://cloudscape.design/patterns/general/validation/

Hope that helps!
Amr

[JSignature]

Thanks for getting back to me. This makes perfect sense! I will look over the link and libraires you provided. Cheers.