Validation: More Examples

[zouterover]

In current example there is no example of a radio-button (group) with react-hook-form. I tried making it with RHF Controller, but it looks like you need a RadioGroup wrapper component which is not straightforward to me how to do.

Also InputNumber also needs an example. See: https://stackoverflow.com/questions/71811650/primereact-number-input-field-with-react-hook-form

• [ ] RadioButton (Group)
• [ ] InputNumber
• [ ] Multiple Checkboxes (https://forum.primefaces.org/viewtopic.php?f=57&t=72336)

[melloware]

I updated my Stack Overflow answer here to include InputNumber examples: https://stackoverflow.com/questions/71811650/primereact-number-input-field-with-react-hook-form

[melloware]

Multiple Checkboxes is kind of a mess with most of the validation frameworks. Here is a hacky workaround for React Hook Form: https://github.com/react-hook-form/react-hook-form/issues/476

[melloware]

Radio Group example:

<form onSubmit={form.handleSubmit(onSubmit)}>
                <Controller
                    name="ingredient"
                    control={form.control}
                    rules={{ required: 'Ingredient is required.' }}
                    render={({ field, fieldState }) => (
                        <>
                            <div className="card flex justify-content-center">
                                <div className="flex flex-wrap gap-3">
                                    <div className="flex align-items-center">
                                        <RadioButton inputId="f1" {...field} name={field.name} inputRef={field.ref} value="Cheese" checked={field.value === 'Cheese'} className={classNames({ 'p-invalid': fieldState.error })} />
                                        <label htmlFor="f1" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
                                            Cheese
                                        </label>
                                    </div>
                                    <div className="flex align-items-center">
                                        <RadioButton inputId="f2" {...field} name={field.name} value="Mushroom" checked={field.value === 'Mushroom'} className={classNames({ 'p-invalid': fieldState.error })} />
                                        <label htmlFor="f2" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
                                            Mushroom
                                        </label>
                                    </div>
                                    <div className="flex align-items-center">
                                        <RadioButton inputId="f3" {...field} name={field.name} value="Pepper" checked={field.value === 'Pepper'} className={classNames({ 'p-invalid': fieldState.error })} />
                                        <label htmlFor="f3" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
                                            Pepper
                                        </label>
                                    </div>
                                    <div className="flex align-items-center">
                                        <RadioButton inputId="f4" {...field} name={field.name} value="Onion" checked={field.value === 'Onion'} className={classNames({ 'p-invalid': fieldState.error })} />
                                        <label htmlFor="f4" className={classNames('ml-2', { 'p-error': errors.ingredient })}>
                                            Onion
                                        </label>
                                    </div>
                                </div>
                                <div className="flex align-items-center ml-8">
                                    {getFormErrorMessage(field.name)}
                                    <Button label="Submit" type="submit" icon="pi pi-check" />
                                </div>
                            </div>
                        </>
                    )}
                />
            </form>
```