Creating a Responsive Form Validation with Formik in React

⋅ 10 min read ⋅ React

In this tutorial, we will learn how to create a responsive form validation using Formik in React. Formik is a powerful library that simplifies form management in React applications, making it easy to handle form validation, submission, and error handling. By using media queries, we can adapt the form validation to different screen sizes, providing a better user experience.

creating responsive form validation formik react

Introduction

What is Formik?

Formik is a popular form management library for React applications. It provides a simple and intuitive API to handle form validation, error handling, and submission. Formik reduces boilerplate code and provides a streamlined approach to form management.

Why use Formik for form validation?

Formik offers several benefits for form validation in React applications. It provides a declarative way to define form validation rules and error handling. It also handles form submission and integrates seamlessly with other libraries and frameworks. Formik simplifies the process of building and maintaining forms, saving time and effort for developers.

What is responsive form validation?

Responsive form validation refers to the ability to adapt form validation to different screen sizes and devices. It ensures that the form validation messages and error handling are displayed correctly on various devices, providing a consistent user experience. By using media queries, we can modify the form validation behavior based on the screen size, making it more user-friendly.

Setting up Formik

Installing Formik

To get started with Formik, we need to install it as a dependency in our React project. Open your terminal and navigate to your project directory. Run the following command to install Formik:

npm install formik

Importing Formik

Once Formik is installed, we can import it into our React component. Add the following line at the top of your component file:

import { Formik } from 'formik';

Creating a basic form with Formik

Now that we have Formik set up, we can create a basic form using the Formik component. The Formik component wraps our form and provides all the necessary functionality for form validation and submission. Here's an example of a simple form using Formik:

<Formik
  initialValues={{ name: '', email: '' }}
  onSubmit={(values) => {
    console.log(values);
  }}
>
  {({ values, handleChange, handleSubmit }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={values.name}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={values.email}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

In the example above, we define the initial values for the form fields using the initialValues prop. We also define an onSubmit callback function that will be called when the form is submitted. Inside the Formik component, we render our form fields and handle their changes and submission using the provided values, handleChange, and handleSubmit functions.

Form Validation with Formik

Validating form fields

Formik provides a convenient way to validate form fields using the validate prop. We can define a validation function that takes the form values as input and returns an object containing any validation errors. Here's an example of how to validate the name and email fields:

<Formik
  initialValues={{ name: '', email: '' }}
  validate={(values) => {
    const errors = {};

    if (!values.name) {
      errors.name = 'Name is required';
    }

    if (!values.email) {
      errors.email = 'Email is required';
    } else if (!isValidEmail(values.email)) {
      errors.email = 'Invalid email address';
    }

    return errors;
  }}
  onSubmit={(values) => {
    console.log(values);
  }}
>
  {/* Form fields */}
</Formik>

In the example above, we define a validation function inside the validate prop. We check if the name and email fields are empty and add an error message to the errors object if they are. We also check if the email address is valid using a helper function isValidEmail and add an error message if it's not.

Displaying error messages

To display the error messages for each form field, we can access the errors object provided by Formik. We can conditionally render an error message below each form field if there is an error. Here's an example of how to display error messages for the name and email fields:

<Formik
  // Other props
>
  {({ values, handleChange, handleSubmit, errors }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={values.name}
        onChange={handleChange}
      />
      {errors.name && <div className="error">{errors.name}</div>}
      
      <input
        type="email"
        name="email"
        value={values.email}
        onChange={handleChange}
      />
      {errors.email && <div className="error">{errors.email}</div>}
      
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

In the example above, we access the errors object provided by Formik and conditionally render an error message below each form field using the logical && operator. If there is an error for a specific field, the corresponding error message will be displayed.

Handling form submission

Formik handles form submission automatically when the submit button is clicked. We can provide an onSubmit callback function that will be called with the form values when the form is submitted. Here's an example of how to handle form submission:

<Formik
  // Other props
  onSubmit={(values) => {
    console.log(values);
    // Perform form submission logic here
  }}
>
  {/* Form fields */}
</Formik>

In the example above, we define an onSubmit callback function inside the Formik component. When the form is submitted, the function will be called with the current form values as its argument. Inside the callback function, we can perform any necessary form submission logic, such as making an API request or updating the state.

Responsive Form Validation

Using media queries for responsive validation

To make the form validation responsive, we can use media queries to modify the validation behavior based on the screen size. We can define different validation rules and error messages for different screen sizes, ensuring a consistent user experience across devices. Here's an example of how to use media queries for responsive validation:

@media (max-width: 600px) {
  .error {
    font-size: 12px;
  }
}

@media (min-width: 601px) {
  .error {
    font-size: 16px;
  }
}

In the example above, we define different font sizes for the error messages based on the screen size. If the screen width is less than or equal to 600 pixels, the font size will be 12 pixels. If the screen width is greater than 600 pixels, the font size will be 16 pixels.

Adapting error messages for different screen sizes

To adapt the error messages for different screen sizes, we can conditionally render different error messages based on the screen size. We can use the window.innerWidth property to get the current window width and update the error messages accordingly. Here's an example of how to adapt error messages for different screen sizes:

<Formik
  // Other props
>
  {({ values, handleChange, handleSubmit, errors }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={values.name}
        onChange={handleChange}
      />
      {errors.name && (
        <div className={`error ${window.innerWidth <= 600 ? 'small' : 'large'}`}>
          {window.innerWidth <= 600 ? 'Name is required' : errors.name}
        </div>
      )}
      
      <input
        type="email"
        name="email"
        value={values.email}
        onChange={handleChange}
      />
      {errors.email && (
        <div className={`error ${window.innerWidth <= 600 ? 'small' : 'large'}`}>
          {window.innerWidth <= 600 ? 'Email is required' : errors.email}
        </div>
      )}
      
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

In the example above, we conditionally render different error messages based on the screen size using the ternary operator. If the screen width is less than or equal to 600 pixels, the error message will be 'Name is required' or 'Email is required'. If the screen width is greater than 600 pixels, the actual error message from the errors object will be displayed.

Enhancing User Experience

Adding real-time validation

To enhance the user experience, we can add real-time validation to the form fields. Real-time validation checks the input value as the user types and displays immediate feedback. We can use the handleChange function provided by Formik to update the form values and trigger the validation. Here's an example of how to add real-time validation:

<Formik
  // Other props
>
  {({ values, handleChange, handleSubmit, errors, touched }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={values.name}
        onChange={handleChange}
        onBlur={handleBlur}
        className={errors.name && touched.name ? 'error' : ''}
      />
      {errors.name && touched.name && <div className="error">{errors.name}</div>}
      
      <input
        type="email"
        name="email"
        value={values.email}
        onChange={handleChange}
        onBlur={handleBlur}
        className={errors.email && touched.email ? 'error' : ''}
      />
      {errors.email && touched.email && <div className="error">{errors.email}</div>}
      
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

In the example above, we add an onBlur event handler to each form field to trigger the validation when the field loses focus. We also conditionally add the error class to the form field based on whether there is an error and the field has been touched. This allows us to style the form field differently when there is an error. Additionally, we check if the field has been touched using the touched object provided by Formik, and only display the error message if the field has been touched.

Showing success messages

To provide feedback to the user when the form is successfully submitted, we can show a success message after the form submission. We can use the status property provided by Formik to store the success message and conditionally render it. Here's an example of how to show a success message:

<Formik
  // Other props
  onSubmit={(values, { setStatus }) => {
    // Perform form submission logic
    setStatus('Form submitted successfully!');
  }}
>
  {({ values, handleChange, handleSubmit, errors, touched, status }) => (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      
      {status && <div className="success">{status}</div>}
      
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

In the example above, we pass a second argument to the onSubmit callback function provided by Formik. This argument contains additional formik state and helper methods. We use the setStatus method to set the success message after the form submission. We then conditionally render the success message using the status property.

Disabling submit button until form is valid

To prevent the user from submitting an invalid form, we can disable the submit button until all form fields are valid. We can use the isValid property provided by Formik to check if the form is valid and conditionally disable the submit button. Here's an example of how to disable the submit button until the form is valid:

<Formik
  // Other props
>
  {({ values, handleChange, handleSubmit, errors, touched, isValid }) => (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      
      <button type="submit" disabled={!isValid}>Submit</button>
    </form>
  )}
</Formik>

In the example above, we access the isValid property provided by Formik to check if the form is valid. We then conditionally disable the submit button using the logical ! operator.

Conclusion

In this tutorial, we learned how to create a responsive form validation using Formik in React. We explored the basics of Formik, including setting it up, creating a basic form, and validating form fields. We also delved into responsive form validation, using media queries to modify the validation behavior based on the screen size. Finally, we discussed how to enhance the user experience by adding real-time validation, showing success messages, and disabling the submit button until the form is valid. With Formik, we can easily handle form validation in React applications and provide a seamless user experience.

Form ValidationReactresponsive designFormik
About Us

Devbrite is the best resource for high-quality curated articles on tech, programming, career growth, and FAANG insights. Our mission at Devbrite is to provide developers with the best kept secrets of the tech industry. Whether you are a complete beginner looking to learn how to code, or you are already a seasoned developer with many years of experience, we provide you with tutorials, career advice, compensation data, and many more.

Discuss topics such as tech stacks, programming languages, compensation, companies, career paths, and more. Create your own developer profile that's easily shareable, or read tutorials or discussions about the topics you are interested in.

Devbrite
Find us on
Resources

Devbrite © 2024. All rights reserved.