Today, We will see Form validation in React Material UI. Material UI is an advanced design framework like Bootstrap . Form Validation in React Material UI.
Form Validation in React with Hooks
This article teaches basic React form validation using React Hooks. Learn more about Hooks from an official website of React JS https://reactjs.org/
Coding Part Starts here
First Install react in your local system by using the below command.
npx create-react-app myApp
I will use a Validation Package of React Js final-form-material-ui and react-final-form. You can Install react-final-form using npm install react-final-form or using Yarn yarn react-final-form.
npm install react-final-form
yarn react-final-form
Make sure that You have installed Material UI and If you have not installed Material UI then, You can Install material UI using this command yarn add @material-ui/core or npm install @material-ui/core
Now This is our Final Code for Validation
src/AddMember.js
import React from 'react';
import { Form, Field } from 'react-final-form';
import { TextField,Select } from 'final-form-material-ui';
import Tooltip from '@material-ui/core/Tooltip';
import { makeStyles } from '@material-ui/core/styles';
import {
Typography,
Paper,
Grid,
Button,
CssBaseline,
MenuItem,
} from '@material-ui/core';
// Picker
import DateFnsUtils from '@date-io/date-fns';
import {
MuiPickersUtilsProvider,
KeyboardDatePicker,
} from '@material-ui/pickers';
import CheckIcon from '@material-ui/icons/Check';
import Divider from '@material-ui/core/Divider';
function AddMember()
{
const useStyles = makeStyles((theme) => ({
container: {
display: 'flex',
flexWrap: 'wrap',
},
textField: {
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 200,
},
submitButtonColor:
{
backgorundColor:"#FF0010"
}
}));
const onSubmit = async values => {
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
await sleep(300);
window.alert(JSON.stringify(values, 0, 2));
};
const validate = values => {
const errors = {};
if (!values.firstName) {
errors.firstName = 'Required';
}
if (!values.lastName) {
errors.lastName = 'Required';
}
if (!values.email) {
errors.email = 'Required';
}
if (!values.height) {
errors.height = 'Required';
}
if (!values.age) {
errors.age = 'Required';
}
if (!values.city) {
errors.city = 'Required';
}
if (!values.address) {
errors.address = 'Required';
}
if (!values.bloodgroup) {
errors.bloodgroup = 'Required';
}
if (!values.state) {
errors.state = 'Required';
}
if (!values.weight) {
errors.weight = 'Required';
}
if (!values.pincode) {
errors.pincode = 'Required';
}
if (!values.mobile) {
errors.mobile = 'Required';
}
return errors;
};
const classes = useStyles();
const btnstyle={marginTop:'0px',backgroundColor:"#FF0010",color:"white",marginRight:"20px"}
const uploadButton ={marginLeft:'10px ',backgroundColor:"#FF0010",color:"white"}
return (
<div className="sevice" style={{overflow:"hidden"}}>
<Grid container spacing={0}>
<Typography align="center" variant="h6">Add Member</Typography>
<Divider/>
<Grid item xs={12} lg={12}>
<div style={{paddingTop:"20px", maxWidth: 1000, }}>
<div className="iconCheck" style={{marginTop:"122px",position:"absolute",marginLeft:"1px"}}>
<Tooltip title="Validate Number before Submitting the form" placement="top-end" aria-label="add">
<CheckIcon size="medium" style={{ color: "red" }}/>
</Tooltip>
</div>
<CssBaseline />
<Form border={1}
onSubmit={onSubmit}
initialValues={{ employed: true, stooge: 'larry' }}
validate={validate}
render={({ handleSubmit, reset, submitting, pristine, values }) => (
<form onSubmit={handleSubmit} noValidate>
<Paper style={{ padding: 30 }}>
<Grid container alignItems="flex-start" spacing={3}>
<Grid item xs={12} md={12}>
<Field fullWidth required variant="outlined" name="firstName" component={TextField} type="text" label="Full Name"/>
</Grid>
<Grid item xs={12} md={3} mt={2}>
<Field fullWidth name="city" labelWidth={6} variant="outlined" component={Select} label=" Gender" formControlProps={{ fullWidth: true }}>
<MenuItem value="Paris">Male</MenuItem>
<MenuItem value="Budapest">
Female
</MenuItem>
</Field>
</Grid>
<Grid item xs={12} md={3}>
<Field fullWidth name="city" variant="outlined" component={Select} label="Relationship" formControlProps={{ fullWidth: true }}>
<MenuItem value="London">Wife</MenuItem>
<MenuItem value="Paris">Son</MenuItem>
<MenuItem value="Budapest">
Daughter
</MenuItem>
</Field>
</Grid>
<Grid item xs={12} md={3}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid container justifyContent="space-around">
<KeyboardDatePicker
fullWidth
inputVariant="outlined"
label="Date of Birth"
id="date-picker-dialog"
format="MM/dd/yyyy"
KeyboardButtonProps={{
'aria-label': 'change date',
}}
/>
</Grid>
</MuiPickersUtilsProvider>
</Grid>
<Grid item xs={12} md={3}>
<Field variant="outlined" required fullWidth name="age" component={TextField} type="text" label="Age"/>
</Grid>
<Grid item xs={12} md={3}>
<Field variant="outlined" name="weight" fullWidth required component={TextField} multiline label="Weight"/>
</Grid>
<Grid item xs={12} md={3}>
<Field variant="outlined" name="height" fullWidth required component={TextField} multiline label="Height"/>
</Grid>
<Grid item xs={12} md={6}>
<Field variant="outlined" name="bloodgroup" fullWidth required component={TextField} multiline label="Blood Group"/>
</Grid>
<Grid item xs={12} md={6}>
<Field variant="outlined" rows={10} name="address" fullWidth required component={TextField} multiline label="Address"/>
</Grid>
<Grid item xs={12} md={6}>
<Field fullWidth name="state" variant="outlined" component={Select} label="State" formControlProps={{ fullWidth: true }}>
<MenuItem value="London">Gujrat</MenuItem>
<MenuItem value="Paris">Delhi</MenuItem>
<MenuItem value="Budapest">Bihar</MenuItem>
</Field><br/><br/>
<Field fullWidth name="state" variant="outlined" component={Select} label="City" formControlProps={{ fullWidth: true }}>
<MenuItem value="London">Gujrat</MenuItem>
<MenuItem value="Paris">Delhi</MenuItem>
<MenuItem value="Budapest">Bihar</MenuItem>
</Field><br/><br/>
<Field variant="outlined" name="pincode" fullWidth required component={TextField} multiline label="Zip/Postal Code"/>
</Grid>
<Grid item xs={6} lg={5}>
{/* <Button variant="contained" style={btnstyle} type="submit" component={AddMemberOTP} Link="/AddMemberOTP" disabled={submitting}> Submit </Button> */}
{/* <Button type="button" variant="contained" onClick={reset} disabled={submitting || pristine}> Reset </Button>
*/}
</Grid>
<Grid item xs={6} lg={7} style={{ marginTop: 16 }}>
{/* <Button variant="contained" style={btnstyle} type="submit" component={AddMemberOTP} Link="/AddMemberOTP" disabled={submitting}> Submit </Button> */}
<Button
variant="contained"
color="primary"
type="submit"
style={{backgroundColor:"red"}}
disabled={submitting}
>
Submit
</Button>
</Grid>
</Grid>
</Paper>
</form>
)}
/>
</div>
</Grid>
</Grid>
</div>
);
}
export default AddMember;
Now You can call this AddMember.js file inside the App.js file.
Run-on localhost http://localhost:3005/AddMember
See our More Projects in React and Node
Crop and Upload Image in Laravel