second form validation
This commit is contained in:
sonika
parent
7f8ddcd292
commit
2401d3eea2
@ -1,36 +1,75 @@
|
||||
import * as React from 'react';
|
||||
import { Button, Checkbox, FormControl, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
|
||||
import { useFormik } from "formik";
|
||||
import * as yup from "yup";
|
||||
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
|
||||
|
||||
export default function FormSection1(){
|
||||
const [state, setState] = React.useState({
|
||||
married: false,
|
||||
single: false,
|
||||
widowed: false,
|
||||
separated: false,
|
||||
divorced: false,
|
||||
});
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setState({ ...state, [event.target.name]: event.target.checked });
|
||||
};
|
||||
interface FormValues {
|
||||
maritalStatus: string;
|
||||
numberOfChildren: string;
|
||||
ages: string;
|
||||
occupation: string;
|
||||
hoursPerWeek: number | string;
|
||||
employer: string;
|
||||
businessPhone: string;
|
||||
spouseName: string;
|
||||
spouseEmployer: string;
|
||||
spouseBusinessPhone: string;
|
||||
emergencyContact: string;
|
||||
relationship: string;
|
||||
phone: string;
|
||||
}
|
||||
|
||||
|
||||
const validationSchema = yup.object({
|
||||
maritalStatus:yup.string().required("Marital Status is required"),
|
||||
numberOfChildren:yup.string().required("Full name is required"),
|
||||
ages:yup.string().required("Full name is required"),
|
||||
occupation:yup.string().required("Occupation is required"),
|
||||
// hoursPerWeek: yup.number().required('Required'),
|
||||
// employer:yup.string().required("Full name is required"),
|
||||
// businessPhone:yup.string().required("Full name is required"),
|
||||
spouseName:yup.string().required("Spouse name is required"),
|
||||
// spouseEmployer:yup.string().required("Full name is required"),
|
||||
// spouseBusinessPhone:yup.string().required("Full name is required"),
|
||||
emergencyContact:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
|
||||
relationship:yup.string().required("Relationship is required"),
|
||||
phone:yup.string().matches(/^\d{10}$/, "Cell phone must be 10 digits"),
|
||||
});
|
||||
|
||||
const Form: React.FC = () => {
|
||||
const formik = useFormik<FormValues>({
|
||||
initialValues:{
|
||||
maritalStatus:'',
|
||||
numberOfChildren:'',
|
||||
ages:'',
|
||||
occupation:'',
|
||||
hoursPerWeek:'',
|
||||
employer:'',
|
||||
businessPhone:'',
|
||||
spouseName:'',
|
||||
spouseEmployer:'',
|
||||
spouseBusinessPhone:'',
|
||||
emergencyContact:'',
|
||||
relationship:'',
|
||||
phone:''
|
||||
},
|
||||
validationSchema,
|
||||
onSubmit:(values)=>{
|
||||
console.log(values);
|
||||
}
|
||||
})
|
||||
return(
|
||||
<>
|
||||
|
||||
<form>
|
||||
<form onSubmit={formik.handleSubmit}>
|
||||
<Grid container direction="row">
|
||||
<Grid item xs={8} className='collapsable-form-style textfield-padding' sx={{paddingLeft:"14px"}}>
|
||||
<Grid item xs={8} className='collapsable-form-style ' sx={{paddingLeft:"14px"}}>
|
||||
<FormControl>
|
||||
<FormLabel>Marital Status</FormLabel>
|
||||
<RadioGroup
|
||||
aria-labelledby="demo-radio-buttons-group-label"
|
||||
defaultValue="married"
|
||||
name="radio-buttons-group"
|
||||
onChange={handleChange}
|
||||
name="maritalStatus"
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.maritalStatus}
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
>
|
||||
<FormControlLabel value="married" control={<Radio />} label="Married" />
|
||||
@ -39,45 +78,148 @@ export default function FormSection1(){
|
||||
<FormControlLabel value="seperated" control={<Radio />} label="Seperated" />
|
||||
<FormControlLabel value="divorced" control={<Radio />} label="Divorced" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
{formik.touched.maritalStatus && formik.errors.maritalStatus ? (
|
||||
<div>{formik.errors.maritalStatus}</div>
|
||||
) : null}
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'></Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Number of Children/Ages" className='collapsable-form-style'/>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Number of Children/Ages"
|
||||
className='collapsable-form-style'
|
||||
name='numberOfChildren'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.numberOfChildren}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.numberOfChildren && Boolean(formik.errors.numberOfChildren)}
|
||||
helperText={formik.touched.numberOfChildren && formik.errors.numberOfChildren}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Occupation" className='collapsable-form-style'/>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Occupation"
|
||||
className='collapsable-form-style'
|
||||
name='occupation'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.occupation}
|
||||
onBlur={formik.handleBlur}
|
||||
error={formik.touched.occupation && Boolean(formik.errors.occupation)}
|
||||
helperText={formik.touched.occupation && formik.errors.occupation}
|
||||
/>
|
||||
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Hours/Week" type="number" className='collapsable-form-style'/>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Hours/Week"
|
||||
type="number"
|
||||
className='collapsable-form-style'
|
||||
name='hoursPerWeek'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.hoursPerWeek}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Employer" className='collapsable-form-style'/>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Employer"
|
||||
className='collapsable-form-style'
|
||||
name='employer'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.employer}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Business Phone" type="tel" className='collapsable-form-style'/>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Business Phone"
|
||||
type="tel"
|
||||
className='collapsable-form-style'
|
||||
name='businessPhone'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.businessPhone}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Spouse's Name" className='collapsable-form-style'/>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Spouse's Name"
|
||||
className='collapsable-form-style'
|
||||
name='spouseName'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.spouseName}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Spouse's Employer" className='collapsable-form-style'/>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Spouse's Employer"
|
||||
className='collapsable-form-style'
|
||||
name='spouseEmployer'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.spouseEmployer}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Business Phone" type="tel" className='collapsable-form-style'/>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Business Phone"
|
||||
type="tel"
|
||||
className='collapsable-form-style'
|
||||
name='spouseBusinessPhone'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.spouseBusinessPhone}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Emergency Contact" className='collapsable-form-style'/>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Emergency Contact"
|
||||
className='collapsable-form-style'
|
||||
name='emergencyContact'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.emergencyContact}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Relationship" className='collapsable-form-style'/>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Relationship"
|
||||
className='collapsable-form-style'
|
||||
name='relationship'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.relationship}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4} className='collapsable-form-style textfield-padding'>
|
||||
<TextField variant="filled" label="Phone" type="tel" className='collapsable-form-style'/>
|
||||
<TextField
|
||||
variant="filled"
|
||||
label="Phone" type="tel"
|
||||
className='collapsable-form-style'
|
||||
name='phone'
|
||||
onChange={formik.handleChange}
|
||||
value={formik.values.phone}
|
||||
onBlur={formik.handleBlur}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
};
|
||||
|
||||
export default Form;
|
||||
Loading…
x
Reference in New Issue
Block a user