Formik is a popular library for managing forms in React applications. It’s a simple way to handle form state, validation, and submission. A useful feature of Formik is the touched property. We’ll explore what Formik touched is and how to use it effectively in our React projects.
touched propertyThe touched property keeps track of which fields the user has visited or used. It is an object where each key represents a field name, and its value indicates whether or not the field has been touched. When a field is touched, it usually means the user has focused on it, entered some value, and moved away from it.
The touched property can be used for the following reasons:
Conditionally render validation messages based on whether a field has been touched. This prevents showing error messages before the user has interacted with the form. For example, if a user submits a form without entering any information, error messages will only appear next to the fields they’ve touched or interacted with previously.
Enables us to provide visual feedback to users, indicating which fields they have interacted with. This helps improve user experience by making the form more intuitive and responsive.
Enable and turn off form submission based on whether certain required fields have been touched, ensuring that users provide the necessary information before submitting the form.
touched property Let’s look at an example of using the touched property on a basic login form. The touched property tracks whether a form field has been interacted with and then deselected (blurred) by the user. When a field is visited, the touched property for that field becomes true. This helps display error messages only for fields the user interacted with to ensure that feedback is relevant, enhancing the form-filling experience by directing attention to areas needing correction.
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
Lines 5–8: We define a validation schema using yup. It specifies that the form should have two fields—email and password. The email field should be a string, in email format, and is required. The password field should also be a string, required, and should be at least 6 characters long.
Line 10: We declare a component named LoginForm.
Lines 14–29: We create the Formik component, which handles form state, validation, and submission.
Lines 15–18: We define an object, initialValues that sets the initial values for the form fields—email and password.
Line 19: We specify the validation schema defined earlier using yup.
Lines 20–28: We define a function, onSubmit, which will be executed when the form is submitted. It simulates a login process by logging the form values to the console after a delay of 1000 milliseconds. It also sets a state variable, loginSuccess, to true to indicate successful login and disable the submit button.
Lines 30–73: We render the form by destructuring props provided by Formik, including event handlers, form values, submission handlers, error messages, and touch state—touched.
Lines 36–43: We define the input field for the email address. We bind onChange and onBlur event handlers to update the form state and validate the field onBlur, respectively. We conditionally render an error message if the email field has an error and has been touched.
Line 46: If the email field has been touched (i.e., the user has focused on and then left the field), and there is an error associated with it, display the error message in red color.
Lines 52–59: We define the input field for the password. Similar to the email field, we bind onChange and onBlur event handlers, and conditionally render an error message if the password field has an error and has been touched.
Line 62: If the password field has been touched (i.e., the user has focused on and then left the field), and there is an error associated with it, display the error message in red.
Lines 65–67: We define the submit button. Its text changes based on the submission status. It’s disabled while the form is submitting.
Note: Submitting the form without touching any fields triggers validation, displaying error messages for the required
passwordfields. Touching and then deselecting a field sets it as touched, showing error messages if the field's value is invalid.
Conclusively, the touched property of Formik provides a powerful way to enhance form handling in React applications. By utilizing this feature, we can create more intuitive and user-friendly forms, improve validation behavior, and ensure better control over form submission.
Free Resources