How integrate Mui with React
We can make form validation of our own with custom hook, but there is a good library for that already, Formik.
Formik provide useForm hook for implementing the validation into our regular form. The first step of using Formik is installing the dependency, lol, also we need a validator function to perform validation.
const validate = values => {
const errors = {};
if (!values.password) {
errors.password = 'Required';
} else if (values.password.length < 6) {
errors.password = 'Must be must be 6 or more characters';
}
if (!values.name) {
errors.name = 'Name Required';
} else if (values.name.length < 1) {
errors.name = 'Minimum of 2 characters';
}
}
It is just another JavaScript function, which check the parameter value and return some object.
useFormik
Let’s create Formik object,
const formik = useFormik({
initialValues: {
email: 'martin@gmail.com',
name: 'Martin Thomas',
},
validate,
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2));
},
});
The useForm hook provide handleSubmit, handleChange, handleBlur, isSubmiting event handlers and properties’ , where handleBlur watching the revisited input change and the isSubmiting return true if there is no error.
Initial values
Create initial values for the form input, it can be expressed as simple object
Validate
Validation can be schema , or a function, we can also use external libraries such as yum for schema generation. For our case it is a function
const validate = values => {
const errors = {};
if (!values.password) {
errors.password = 'Required';
} else if (values.password.length < 6) {
errors.password = 'Must be must be 6 or more characters';
}
if (!values.name) {
errors.name = 'Name Required';
} else if (values.name.length < 1) {
errors.name = 'Minimum of 2 characters';
}
if (!values.email) {
errors.email = 'Required';
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid email address';
}
if (!values.lid) {
errors.lid = 'Required';
}
if (!values.cid) {
errors.cid = 'Required';
}
return errors;
};
onSubmit
We can wrap submission logic in this handler.
Add validation to the form
In the form section we can us the handlers as formik.handlerName also the value can can be accessed from the value Object. The error object can be use to display the error messages.
import React from 'react';
import { useFormik } from 'formik';
import Button from "@mui/material/Button";
import CssBaseline from "@mui/material/CssBaseline";
import TextField from "@mui/material/TextField";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Container from "@mui/material/Container";
import { createTheme, ThemeProvider } from "@mui/material/styles";
....
const formik = useFormik({
initialValues: {
email: 'martin@gmail.com',
name: 'Martin Thomas',
},
validate,
onSubmit: (values) => {
alert(JSON.stringify(values, null, 2));
},
});
<div>
<ThemeProvider theme={theme}>
<Container component="main" maxWidth="xs">
<CssBaseline />
<Box
sx={{
marginTop: 8,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<Box
component="form"
onSubmit={formik.handleSubmit}
sx={{ mt: 3 }}
>
<Grid container spacing={2}>
<Grid item xs={12} sm={12}>
<TextField
autoComplete="given-name"
name="name"
required
fullWidth
id="name"
label="Name"
onBlur={formik.handleBlur}
value={formik.values.name}
onChange={formik.handleChange}
error={formik.touched.name && Boolean(formik.errors.name)}
helperText={formik.touched.name && formik.errors.name}
autoFocus
/>
</Grid>
<Grid item xs={12}>
<TextField
required
fullWidth
id="email"
onBlur={formik.handleBlur}
label="Email Address"
name="email"
autoComplete="email"
value={formik.values.email}
onChange={formik.handleChange}
error={formik.touched.email && Boolean(formik.errors.email)}
helperText={formik.touched.email && formik.errors.email}
/>
</Grid>
<Button
type="submit"
disabled={formik.isSubmitting}
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
Sign Up
</Button>
</Box>
</Box>
</Container>
</ThemeProvider>
</div>
Integrating Formik with Form and Mui so easy.
Developer stories 