required on Select does nothing | Mantine | Page 1

rustic herald Oct 31, 2023, 11:48 AM

#

I have simple select component:

<Select
    placeholder="Choose a topic"
    data={loaderData.userTopics.map((topic) => topic.name)}
    name="topicName"
    required
/>

The required prop does show up in the HTML:

<input class="m-8fb7ebe7 mantine-Input-input mantine-Select-input" data-variant="default" placeholder="Choose a topic" readonly="" aria-haspopup="listbox" autocomplete="off" required="" aria-invalid="false" id="mantine-sfzdeby95" value="" aria-controls="mantine-lbus63ecf">

But it does not work. When I submit the form without selecting anything in the form, it just sends an empty string for topicName. Am I doing something wrong?

wary zodiac Oct 31, 2023, 12:19 PM

#

you need to setup validation yourself

#

https://mantine.dev/form/validation/

https://mantine.dev/form/validation/#schema-based-validation

Form validation | Mantine

Validate fields with use-form hook

rustic herald Oct 31, 2023, 12:34 PM

#

wary zodiac you need to setup validation yourself

why does the default not work?

wary zodiac Oct 31, 2023, 12:37 PM

#

i am not certain, i do not think mantine form submission works exactly like native forms

woeful cosmos Oct 31, 2023, 12:38 PM

#

rustic herald why does the default not work?

Native validation does not work in custom Select and other similar components. If you need native validation in your application, use NativeSelect component instead.

#required on Select does nothing