'isRequired' prop not working for me in my <Form> 's <TextField /> #4245
-
|
I am not getting any errors when I submit the form empty, it submits the same way when there is no <Form
isRequired
necessityIndicator="icon"
aria-label="Required with asterisk example"
maxWidth="size-3600"
onSubmit={onSubmit}
validationState="invalid"
>
<TextField label="Name" />
<ActionButton type="submit">Submit</ActionButton>
</Form>check it in code sandbox |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
The reason this is happening is because we use aria-required, not the required attribute. This was done as a result of this issue #2123 The main point of which is, we don't want the native prompt. There may be form elements that are invisible because their UI is presented stylistically in a different way, such as ColorArea, ColorWheel, Slider, etc. So the native prompt would look strange. And finally, there may be form elements which are not backed by a native input or are backed by several. These would need to be managed at the React State level anyways. Example, DateField, which consists of multiple segments. If anything is required, you should prevent the form from submitting yourself and handle validation yourself. There are many libraries out there that will work with our hooks and components that you can leverage to make this simpler on yourself, such as https://react-hook-form.com/ |
Beta Was this translation helpful? Give feedback.
-
|
Understood, Thanks a lot. |
Beta Was this translation helpful? Give feedback.
The reason this is happening is because we use aria-required, not the required attribute. This was done as a result of this issue #2123
The main point of which is, we don't want the native prompt. There may be form elements that are invisible because their UI is presented stylistically in a different way, such as ColorArea, ColorWheel, Slider, etc. So the native prompt would look strange.
And finally, there may be form elements which are not backed by a native input or are backed by several. These would need to be managed at the React State level anyways. Example, DateField, which consists of multiple segments.
If anything is required, you should prevent the form from submitting yourself …