StackBits - React UI & Full-Stack Code Library

Utilities > Regex Validations

Reusable Yup Validations

Reusable Yup validations help streamline form validation by defining commonly used rules once and reusing them across multiple forms. This approach reduces redundancy, improves consistency, and makes validation easier to maintain.

Why Use Reusable Yup Validations?

Consistency Across Forms

Define validation rules once and use them everywhere.

Saves Development Time

No need to rewrite validation logic for every form.

Easy Maintenance

Update validation rules in one place, and they apply everywhere.

Improved Readability

Keep form schemas clean by referencing reusable rules.

Scalability

Easily extend validation logic as project requirements grow.

Follow below steps 👇🏻

Install dependencies

1npm i yup

Re-usable Validation Rules

Store these reusable validations in a separate file for easy access. They provide a simple template that works for most cases, but feel free to duplicate and customize them to fit your needs!

1import * as yup from 'yup';
2
3// Reusable validation rules
4const validations = {
5    // ? A simple name validation, it can be used for inputs where you have to accept text only
6    name: yup.string()
7        .min(3, 'Name must be at least 3 characters long')
8        .matches(/^[A-Za-zs]+$/, 'Name cannot contain numbers or special characters')
9        .required('Name is required'),
10
11    // ? This can be used for validating emails
12    email: yup.string()
13        .matches(/^[w-.]+@([w-]+.)+[w-]{2,4}$/, 'Invalid email format')
14        .required('Email is required'),
15
16    // ? This can be used to validate phone numbers with exactly 10 digits
17    phoneNumber: yup.string()
18        .matches(/^[0-9]{10}$/, 'Phone number must be exactly 10 digits')
19        .required('Phone number is required'),
20
21    // ? This can be used to validate pincodes with exactly 6 digits
22    pincode: yup.string()
23        .matches(/^[0-9]{6}$/, 'Pincode must be exactly 6 digits')
24        .required('Pincode is required'),
25
26    // ? This is for validating URL
27    url: yup.string()
28        .matches(/^(https?://)?([w.-]+).([a-z]{2,6})([/w .-]*)*/?$/i, 'Invalid URL Format')
29        .required('URL is required'),
30
31    // ? This can be used for integer inputs
32    amount: yup.number()
33        .positive('Amount must be a positive number')
34        .typeError('Amount must be a valid number')
35        .required('Amount is required'),
36
37    // ? You can also go the extra mile for conditional validations like so 👇🏻
38    accountType: yup.string().oneOf(['personal', 'business']).required('Account type is required'),
39    companyName: yup.string()
40        .when(['accountType'], { // ? Accept n number of arguments here
41        is: 'business', // ? If accountType is 'business'
42        then: (schema) => schema.required('Company name is required'), // ? Make it required
43        otherwise: (schema) => schema.notRequired(), // ? Otherwise, it's optional
44    }),
45
46};
47
48export default validations;

Usage

1import * as yup from 'yup';
2import validations from './validations';
3
4const formSchema = yup.object().shape({
5  name: validations.name,
6  email: validations.email,
7  phoneNumber: validations.phoneNumber,
8  pincode: validations.pincode,
9  url: validations.url,
10  amount: validations.amount,
11});
12
13export default formSchema;

⭐️ Got a question or feedback?
Feel free to reach out!