MDB React & React Hook Form intergration
MDB React & React Hook Form intergration
MDB React integration with React Hook Form. Configuration, various examples of implementation and much more.
RHF is a library that makes dealing with forms in React easy. It is built with performance in mind. It allows you to create forms with minimal code and it is easy to integrate with MDB React.
In this tutorial you will learn how to validate forms created with MDB React using RHF.
Install React Hook Form
To install RHF, run the following command in your project directory:
You can find more details in the official documentation.
npm i react-hook-form
yarn add react-hook-form
Basic example
In this form we will use the useForm hook to register
inputs and handleSubmit to console log the form data.
The function will not be called if a required field is empty.
import { useForm } from 'react-hook-form';
import { MDBInput, MDBSelect, MDBBtn } from 'mdb-react-ui-kit';
import { selectData } from './selectData';
export default function App() {
const { register, handleSubmit, setValue } = useForm();
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<MDBInput {...register('firstName', { required: true })} />
<MDBSelect
className='my-3'
label='Gender'
preventFirstSelection
data={selectData}
{...register('gender')}
onChange={(opt) => setValue('gender', opt.value)}
/>
<MDBBtn type='submit'>Submit</MDBBtn>
</form>
);
}
const selectData = [
{
text: 'male',
value: 'male',
},
{
text: 'female',
value: 'female',
},
{
text: 'other',
value: 'other',
},
];
export { selectData };
Default values
If the component you use has a value set by default, don't forget to pass it to the useForm hook.
import { useForm } from 'react-hook-form';
import { MDBInput, MDBSelect, MDBBtn } from 'mdb-react-ui-kit';
import { selectData } from './selectData';
export default function App() {
const { register, handleSubmit, setValue } = useForm({
defaultValues: {
gender: 'male',
},
});
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<MDBSelect
label='Gender'
data={selectData}
{...register('gender')}
onChange={(opt) => setValue('gender', opt.value)}
/>
<MDBBtn type='submit'>Submit</MDBBtn>
</form>
);
}
const selectData = [
{
text: 'male',
value: 'male',
},
{
text: 'female',
value: 'female',
},
{
text: 'other',
value: 'other',
},
];
export { selectData };
Basic validation
register accepts an object as its second argument, which includes validation rules.
There are many options available, but the most commonly used are:
required- field is requiredminLength- minimum lengthmaxLength- maximum lengthmin- minimum valuemax- maximum valuepattern- regex patternvalidate- custom function
The options can be passed with or without an error message.
<MDBInput
{...register("MDBInput", {
minLength: 5
})}
/>
<MDBInput
{...register("MDBInput", {
minLength: {
value: 5,
message: "The text must be at least 5 characters long",
}
})}
/>
Copy the code from this snippet below to see how it works in practice.
Open console and see how the error object changes.
import { useForm } from 'react-hook-form';
import { MDBInput, MDBBtn, MDBDatepicker } from 'mdb-react-ui-kit';
import { selectData } from './selectData';
export default function App() {
const {
register,
handleSubmit,
setValue,
formState: { errors },
} = useForm();
console.log('errors', errors);
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<MDBInput
className='my-3'
label='First name'
{...register('firstName', {
required: true,
minLength: 2,
maxLength: 10,
})}
/>
<MDBInput
className='my-3'
label='Last name'
{...register('lastName', {
required: true,
minLength: 2,
maxLength: 10,
})}
/>
<MDBDatepicker
className='my-3'
label='Date of visit'
{...register('date', {
required: true,
pattern: /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/,
})}
onChange={(value) => setValue('date', value)}
/>
<MDBBtn type='submit'>Submit</MDBBtn>
</form>
);
}
import { useForm } from 'react-hook-form';
import { MDBInput, MDBBtn, MDBDatepicker } from 'mdb-react-ui-kit';
export default function App() {
const {
register,
handleSubmit,
setValue,
formState: { errors },
} = useForm();
console.log('errors', errors);
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<MDBInput
className='my-3'
label='First name'
{...register('firstName', {
required: 'This field is required.',
minLength: {
value: 2,
message: 'First name should be at least 2 characters long.',
},
maxLength: {
value: 10,
message: 'First name should be at most 10 characters long.',
},
})}
></MDBInput>
<MDBInput
className='my-3'
label='Last name'
{...register('lastName', {
required: 'This field is required.',
minLength: {
value: 2,
message: 'Last name should be at least 2 characters long.',
},
maxLength: {
value: 10,
message: 'Last name should be at most 10 characters long.',
},
})}
></MDBInput>
<MDBDatepicker
className='my-3'
label='Date of visit'
{...register('date', {
required: 'This field is required.',
pattern: {
value: /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/,
message: 'Date should be in format dd/mm/yyyy.',
},
})}
onChange={(value) => setValue('date', value)}
></MDBDatepicker>
<MDBBtn type='submit'>Submit</MDBBtn>
</form>
);
}
Invalid feedback
We already have some validation rules and different error messages. Let's check out how to display them.
Check this example.
import React from "react";
import { useForm } from "react-hook-form";
import { MDBInput, MDBBtn, MDBDatepicker } from "mdb-react-ui-kit";
export default function App() {
const {
register,
handleSubmit,
setValue,
formState: { errors },
} = useForm();
console.log("errors", errors);
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div className="position-relative pb-3">
<MDBInput
className={`${errors.firstName ? "is-invalid" : ""}`}
label="First name"
{...register("firstName", {
required: "This field is required.",
minLength: {
value: 2,
message: "First name should be at least 2 characters long.",
},
maxLength: {
value: 10,
message: "First name should be at most 10 characters long.",
},
})}
/>
{errors.firstName && (
<span className="invalid-feedback d-block">{errors.firstName.message}</span>
)}
</div>
<div className="position-relative pb-3">
<MDBInput
className={`${errors.lastName ? "is-invalid" : ""}`}
label="Last name"
{...register("lastName", {
required: "This field is required.",
minLength: {
value: 2,
message: "Last name should be at least 2 characters long.",
},
maxLength: {
value: 10,
message: "Last name should be at most 10 characters long.",
},
})}
/>
{errors.lastName && (
<span className="invalid-feedback d-block">{errors.lastName.message}</span>
)}
</div>
<div className="position-relative pb-3">
<MDBDatepicker
className={`${errors.date ? "is-invalid" : ""}`}
label="Date of visit"
{...register("date", {
required: "This field is required.",
pattern: {
value: /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/,
message: "Date should be in format dd/mm/yyyy.",
},
})}
onChange={(value) => setValue("date", value)}
/>
{errors.date && <span className="invalid-feedback d-block">{errors.date.message}</span>}
</div>
<MDBBtn className="mt-4" type="submit">
Submit
</MDBBtn>
</form>
);
}
Custom validation
Sometimes you may need to create a custom validation rule.
You can do it by passing a function to the validate option.
import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { MDBSelect, MDBBtn } from 'mdb-react-ui-kit';
import { selectData } from './selectData';
function App() {
const [wasValidated, setWasValidated] = useState(false);
const {
handleSubmit,
register,
setValue,
setError,
clearErrors,
formState: { errors },
} = useForm();
console.log('errors', errors);
const onSubmit = (data) => console.log(data);
return (
<div className='col-md-6 mx-auto'>
<form onSubmit={handleSubmit(onSubmit)} className='row align-items-center'>
<div className='my-2 col-6 position-relative'>
<MDBSelect
label='Select at least 3 options'
inputClassName={`${errors.MDBSelect ? 'is-invalid' : ''}`}
multiple
required
invalidFeedback='You must select at least 3 options'
preventFirstSelection
{...register('MDBSelect', {
validate: (options) => {
if (!options || options.length < 3) {
return 'You must select at least 3 options';
}
},
})}
onChange={(e) => {
clearErrors('MDBSelect');
setValue('MDBSelect', e);
if (!wasValidated) return;
if (!e || e.length < 3) {
return setError('MDBSelect', {
type: 'validate',
message: 'You must select at least 3 options',
});
}
}}
data={selectData}
/>
{errors.MDBSelect &&
<span className='invalid-feedback' style={{ display: 'block' }}>
{errors.MDBSelect.message}
</span>}
</div>
<MDBBtn onClick={() => setWasValidated(true)} type='submit'>
Submit
</MDBBtn>
</form>
</div>
);
}
export default App;
const selectData = [
{ text: 'Tony Stark', value: 'Ironman' },
{ text: 'Bruce Wayne', value: 'Batman' },
{ text: 'Clark Kent', value: 'Superman' },
{ text: 'Peter Parker', value: 'Spiderman' },
{ text: 'Steve Rogers', value: 'Captain America' },
];
export { selectData };