Form Validation in React Material

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

Project Snippet

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

Photo Capture in React

Nodejs Connection in MongoDB

Crop and Upload Image in Laravel

Signup using REST API in Laravel

Email Validation in ReactJS

Leave a Reply

Your email address will not be published. Required fields are marked *