How to disabled the submit button in formik

How to disabled the submit button in formik

ReactJS 17-03-2023 Saheb Sutradhar

How to disabled the submit button in formik ?

 

  const validation = (values) => {
    let error = {};
    if (!values.name) {
      error.name = 'Name is required';
    }
    if (!values.password) {
      error.phone = 'Password is required';
    }
    return error;
  }

  const validateSkills = (skill) => {
    let error;
    if (!skill) {
      error = 'Skill Required'
    }
    return error;
  }
  let initialValues = {
    name: '',
    password: '',
    skills: ['']
  };

  const onSubmit = (values) => {
    console.log('--values--', values)
  }

<Formik
      initialValues={initialValues}
      validate={validation}
      onSubmit={onSubmit}
      validateOnMount
    >
{
  (formik)=>{
return(
   <Form>
      <Field name="name"/>
      <button type='submit' disabled={!formik.isValid} >Submit</button>
   </Form>
)

  }
}
</Formik>

When we load the page and as soon as the form mount on the DOM formik runs the validation on each field and populates the error object, by default formik does not do that.

with the help of validateOnMount we are enabling that feature.
 
But there is a problem , if you have a form with 20-30 fields then it is not  a good ides to run validation on each fields. so validateOnMount is good if you have a form with less fields.
 
 
In Real scenario what we do :
  • All the fields are having validation so if the user don't fill value to any field then we will show the validation error message
  • While submitting the form we should prevent the user to click the submit button multiple time , so we need to disabled it.

So, we have to disabled the submit button when there is any validation error and while submitting , to achieve that formic provides two properties

isValid and isSubmitting  the initial value of isValid is true and the initial value of isSubmitting is false , so when there is any error the the isValue gets changed to false.

and when we submit the form the the value of isSubmitting gets changed from false to true.  But if you want to reset the value of isSubmitting that you have to do in onSubmit function 

onSubmit() function provides two parameters first param is value and the second one is props , props has setSubmitting(false) to reset isSubmitting

 

  <button disabled={!formik.isValid || formik.isSubmitting} type='submit'>Submit</button>
  const onSubmit = (values , props) => {
    console.log('--values--', values);
    props.setSubmitting(false);
  }

 

Complete Code : 

import { Form, Formik, Field, ErrorMessage, FieldArray } from 'formik';



const Index = () => {

  const validation = (values) => {
    let error = {};
    if (!values.name) {
      error.name = 'Name is required';
    }
    return error;
  }


  let initialValues = {
    name: '',
  };

  const onSubmit = (values, props) => {
    console.log('--values--', values);
    props.setSubmitting(false)
  }
  return (
    <Formik
      initialValues={initialValues}
      validate={validation}
      onSubmit={onSubmit}
    >
      {
        (formik) => {
          return(
            <Form>
            <Field name="name" />
            <ErrorMessage name='name' />
            <button type='submit' disabled={!formik.isValid || formik.isSubmitting} >Submit</button>
          </Form>
          )


        }
      }
    </Formik>
  )

}


export default Index;



Related Posts

Card image cap

ReactJS Tutorial

ReactJS 07-09-2022 Saheb Sutradhar

ReactJS Tutorial Basic ...

Card image cap

React cteateContext and useContect context hook

ReactJS 21-12-2022 Saheb Sutradhar

React context hook ...

Card image cap

How to crate basic form in React using Formik

ReactJS 15-03-2023 Saheb Sutradhar

How to crate basic form in React using Formik , react formik example ...

Card image cap

Formik Components

ReactJS 17-03-2023 Saheb Sutradhar

Formik Components , how to create from using formik components ...

Card image cap

How to load initial value in formik form

ReactJS 17-03-2023 Saheb Sutradhar

How to load initial value in formik form ? ...