formik for validation and post request - node.js

Question

const classes = useStyles();
const initialValues = {
email: '',
fullName: '',
subject: '',
massage: '',
}
const onSubmit = (values) =>{
console.log("values")
axios
.post(`http://localhost:5000/sendmail/contact` , values)
.then((res) => console.log(res))
.catch((errors) => console.log(errors));
};
const formik = useFormik({
initialValues,
validationSchema,
onSubmit,
})
<form onSubmit={formik.handleSubmit}>
<Grid className={classes.GridContactHeading}>
<Typography variant="h4">Contact us</Typography>
</Grid>
<Grid className={classes.GridContactSubHeading}>
<Typography variant="h5">Feel free to ask for details, don't save any questions!</Typography>
</Grid>
<Grid container justifyContent="center">
<Grid item sm={8} md={6} className={classes.GridText1}>
<TextField
required
name='fullName'
label='Full Name'
onChange={formik.handleChange}
value={formik.values.fullName}
className={classes.TextFieldContact}
/>
{formik.errors.fullName ? <div>{formik.errors.fullName}</div> : null}
</Grid>
<Grid item sm={8} md={6} className={classes.GridText2}>
<TextField
required
id="email"
name="email"
label="Email"
fullWidth
onChange={formik.handleChange}
value={formik.values.email}
className={classes.TextFieldContact }
/>
{formik.errors.fullName ? <div>{formik.errors.email}</div> : null}
</Grid>
</Grid>
<Grid className={classes.GridText3}>
<TextField
required
id="subject"
name="subject"
label="Subject"
fullWidth
onChange={formik.handleChange}
value={formik.values.subject}
className={classes.TextFieldContact}
/>
{formik.errors.fullName ? <div>{formik.errors.subject}</div> : null}
</Grid>
<Grid className={classes.GridText3}>
<TextareaAutosize
placeholder="Massage"
minRows={15}
className={classes.AutoSizeTextfield}
id="massage"
name="massage"
onChange={formik.handleChange}
value={formik.values.massage}
/>
{formik.errors.massage ? <div>{formik.errors.massage}</div> : null}
</Grid>
<Grid>
<Button type="submit" variant="contained" color="primary" style={{marginTop:"20px", marginBottom: "20px"}} >
Send Massage
</Button>
</Grid>
</form>
i have created form and validate using formik and yup and now i have to send it to the backend as apost request and get an email but here onsubmit part doesnt work

Answer 1

I have a hunch that your onSubmit function is conflicting with Formik's onSubmit function. That, or your validationSchema needs to be directly declared in your useFormik object. I edited it just a bit with some format changes.
validationSchema: Yup.object({
email: Yup.string('Enter your email').email('Enter a valid
email').required('Email is required'),
fullName: Yup.string('Enter your FullName').trim()
.required('Full Name is required'),
subject: Yup.string('Enter your Subject').trim().required('subject is required'),
message: Yup.string('Enter your Message').trim().required('Message is required')
})

Answer 2

Please check your validationSchema logic. If this log line is not printed on submit event click, most probably the form is invalid. So check your validationSchema first. and why do you pass params to yup.string() method. https://www.npmjs.com/package/yup#string