Pretty new with Formik, I have a simple form, which has validation. I need to have 2 buttons, Submit and a Save button which will mostly do the same thing, however, if "Save" button is clicked, I want the validation to be "disabled" or rather, all required fields will no longer be required. Any ideas how I can achieve this?
Some codes below:
const initialValues = {
title: "",
description: ""
};
const validationSchema = Yup.object().shape({
title: Yup.string()
.max(50, 'You may only enter up to 50 characters')
.required('Required'),
description: Yup.string()
.max(200, 'You may only enter up to 200 characters')
.required('Required'),
})
const CreateForm = () => {
const handleCancel = () => {
alert("Cancelled!")
}
return (
<div>
<Formik initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={(values) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
}, 3000)
}}
>
{props => (
<Form>
<CustomTextInput label="Title"
name="title" type="input" placeholder="Enter Title" />
<CustomTextInput label="Description"
name="description" type="input" placeholder="Description" />
<div>
<Button type="submit" variant="contained" color="primary">
Submit
</Button>
<Button type="submit" variant="contained" color="secondary" >
Save
</Button>
<Button variant="contained" color="default" onClick={handleCancel}>
Cancel
</Button>
</div>
</Form>
)}
</Formik>
</div>
)
}
export default CreateForm
Firstly remove type="submit"
. Because formik
will understand it like submit and will validate it. Second add onClick
function:
<Button
variant="contained"
color="secondary"
onClick={() => handleSave(props.values)} >Save</Button>
And:
const handleSave = (values) => {
// do what you want like on submit
}