Creating Custom Validation Rules in TanStack Form
Show how to create and integrate custom validation logic for a field in TanStack Form, using the useForm hook.
import React from 'react';
import { useForm } from '@tanstack/react-form';
Import necessary hooks from TanStack Form and React.
const customValidation = (value) => {
if (!value) {
return 'This field is required';
}
if (value.length < 5) {
return 'Value must be at least 5 characters long';
}
return undefined;
};
Define a custom validation function to check if the field is filled and its value is at least 5 characters long.
const MyForm = () => {
const form = useForm({
initialValues: {
myField: ''
},
validate: (values) => {
const errors = {};
errors.myField = customValidation(values.myField);
return errors;
}
});
Set up the form with useForm hook, initializing the 'myField' with an empty string and apply the custom validation defined earlier through the validate option.
return (
<form onSubmit={form.handleSubmit()}>
<input
{...form.register('myField')}
type="text"
placeholder="Enter value"
/>
{form?.errors?.myField && <div>{form.errors.myField}</div>}
<button type="submit">Submit</button>
</form>
);
};
Render the form in a React component, showing how to use the useForm instance to handle the form submission, register the input field, and display validation errors.
export default MyForm;
Export the form component for use in your application.