I've developed a job application form using React, Formik, and yup for input validation. The schema ensures data integrity for fields like name, email, and more. Despite implementing resetForm() post-submission, the checkbox status persists. This intriguing behavior warrants insights.
`const schema = yup.object().shape({
name: yup
.string()
.required("Please enter your name")
.min(3, "First Name must be 3 char long")
.matches(/^[A-Za-z ]+$/, "Full name should consist only letters"),
email: yup
.string()
.required("Please enter your email")
.email()
.matches(
/^([\w.+]{1,})([^\W])(@)([\w]{1,})(\.[\w]{1,})+$/,
"Email address is not valid"
),
phone: yup
.string()
.required("Please enter your phone number")
.matches(phoneRegExp, "Phone number is not valid")
.max(10, "Mobile should consist 10 numerics only")
.min(10, "Mobile should consist 10 numerics only"),
file: yup.mixed().required("Please upload PDF only"),
message: yup.string(),
terms: yup.bool().oneOf([true], "Terms must be accepted"),
});`
The form I had created using react-bootstrap
<Formik
validationSchema={schema}
onSubmit={(_values, { setSubmitting, resetForm }) => {
console.warn(_values);
setSubmitting(true);
resetForm();
setSubmitting(false);
}}
initialValues={{
name: "",
email: "",
phone: "",
file: "",
message: "",
terms: false,
}}
>
{({
handleSubmit,
handleChange,
values,
touched,
errors,
setFieldValue,
setFieldError,
}) => (
<Form noValidate onSubmit={handleSubmit} className="sticky">
<Row className="mb-3">
<!-- other form groups -->
<Form.Group className="position-relative mb-3">
<Form.Check
required
name="terms"
label="Agree to terms and conditions"
onChange={handleChange}
isInvalid={!!errors.terms}
isValid={touched.terms && !errors.terms}
feedback={errors.terms}
feedbackType="invalid"
id="termsValidation"
feedbackTooltip
/>
</Form.Group>
<Button type="submit" className="cta apply-cta">
Apply Now »
</Button>
</Row>
</Form>
)}
</Formik>
`The provided code snippet demonstrates a job application form created using React, Formik, and yup. The form includes various fields and a "terms" checkbox. Despite utilizing resetForm() to clear inputs upon submission, the checkbox retains its checked status. Seeking guidance to resolve this unexpected behavior.
Suggestions Appreciated!
If you've encountered this behavior or have insights into solving the checkbox issue after form submission, your suggestions would be greatly appreciated. I'm keen to ensure a smooth user experience and consistent form behavior.`
