Skip to main content

Validation Utilities

** Last Built**: September 2, 2025 at 4:19 PM The validation utilities provide a comprehensive form validation system with built-in validation rules and support for custom validation functions. These utilities are designed to work seamlessly with form components and provide consistent validation across your application.

Overview​

The validation utilities provide:

  • Built-in Validation Rules: Common validation patterns (required, min, max, pattern)
  • Custom Validation: Support for custom validation functions
  • Field-level Validation: Validate individual fields with specific rules
  • Form-level Validation: Validate entire forms with multiple fields
  • Type Safety: Full TypeScript support with proper typing
  • Flexible Configuration: Easy to configure and extend validation rules

Validation Rules​

The system supports the following built-in validation rules: | Rule Type | Description | Example | | ---------------------------------------------------------------------------------- | | required | Field must have a value | { type: 'required', message: 'This field is required' } | | min | Minimum length or value | { type: 'min', value: 3, message: 'Must be at least 3 characters' } | | max | Maximum length or value | { type: 'max', value: 100, message: 'Must be less than 100 characters' } | | pattern | Regular expression pattern | { type: 'pattern', value: '^[a-zA-Z]+$', message: 'Only letters allowed' } | | custom | Custom validation function | { type: 'custom', value: (val) => val.includes('@'), message: 'Must contain @' } |

Basic Usage​

import { validateField, validateForm } from '@react-superadmin/core';
// Field configuration with validation rules
const fieldConfig = {
  name: 'email',
  label: 'Email Address',
  type: 'email',
  validation: [
    { type: 'required', message: 'Email is required' },
    {
      type: 'pattern',
      value: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$',
      message: 'Invalid email format',
    },
  ],
};
// Validate a single field
const error = validateField('user@example.com', fieldConfig);
console.log(error); // null (valid)
// Validate an entire form
const formData = { email: 'invalid-email' };
const errors = validateForm(formData, [fieldConfig]);
console.log(errors); // { email: 'Invalid email format' }

Examples​

Basic Field Validation​


function BasicValidationExample() {
const fieldConfig = {
  name: 'username',
  label: 'Username',
  type: 'text',
  validation: [
{ type: 'required', message: 'Username is required' },
{ type: 'min', value: 3, message: 'Username must be at least 3 characters' },
{ type: 'max', value: 20, message: 'Username must be less than 20 characters' }
  ]
};
const testValues = ['', 'ab', 'validusername', 'verylongusername123456789'];
return (
<div className='space-y-4'>
<h3 className='text-lg font-medium'>Validation Results:</h3>
{testValues.map((value, index) => {
  const error = validateField(value, fieldConfig);
  return (
<div key={index} className='p-3 border rounded'>
<strong>Value:</strong> "{value}" <br />
<strong>Error:</strong> {error || 'Valid ✓'}
</div>
  );
})}
</div>
); }

Email Validation​


function EmailValidationExample() {
const emailField = {
  name: 'email',
  label: 'Email Address',
  type: 'email',
  validation: [
{ type: 'required', message: 'Email is required' },
{ type: 'pattern', value: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$', message: 'Invalid email format' }
  ]
};
const testEmails = ['', 'invalid', 'user@example', 'user@example.com'];
return (
<div className='space-y-4'>
<h3 className='text-lg font-medium'>Email Validation:</h3>
{testEmails.map((email, index) => {
  const error = validateField(email, emailField);
  return (
<div key={index} className='p-3 border rounded'>
<strong>Email:</strong> "{email}" <br />
<strong>Result:</strong> {error || 'Valid ✓'}
</div>
  );
})}
</div>
); }

Custom Validation​


function CustomValidationExample() {
const passwordField = {
  name: 'password',
  label: 'Password',
  type: 'password',
  validation: [
{ type: 'required', message: 'Password is required' },
{ type: 'min', value: 8, message: 'Password must be at least 8 characters' },
{  type: 'custom',  value: (val) => /[A-Z]/.test(val),  message: 'Password must contain at least one uppercase letter'  },
{  type: 'custom',  value: (val) => /[0-9]/.test(val),  message: 'Password must contain at least one number'  }
  ]
};
const testPasswords = ['', 'weak', 'StrongPass', 'StrongPass123'];
return (
<div className='space-y-4'>
<h3 className='text-lg font-medium'>Password Validation:</h3>
{testPasswords.map((password, index) => {
  const error = validateField(password, passwordField);
  return (
<div key={index} className='p-3 border rounded'>
<strong>Password:</strong> "{password}" <br />
<strong>Result:</strong> {error || 'Valid ✓'}
</div>
  );
})}
</div>
); }

Form Validation​


function FormValidationExample() {
const formFields = [
  {
name: 'name',
label: 'Full Name',
type: 'text',
validation: [
{ type: 'required', message: 'Name is required' },
{ type: 'min', value: 2, message: 'Name must be at least 2 characters' }
]
  },
  {
name: 'age',
label: 'Age',
type: 'number',
validation: [
{ type: 'required', message: 'Age is required' },
{ type: 'min', value: 18, message: 'Must be at least 18 years old' },
{ type: 'max', value: 120, message: 'Age must be less than 120' }
]
  },
  {
name: 'website',
label: 'Website',
type: 'url',
validation: [
{ type: 'pattern', value: '^https?://.+', message: 'Website must start with http:// or https://' } ];
const testFormData = {
name: 'John Doe',
age: 25,
website: 'https://example.com'
};
const errors = validateForm(testFormData, formFields);
return (
<div className='space-y-4'>
<h3 className='text-lg font-medium'>Form Validation Results:</h3>
<div className='p-3 border rounded'>
  <strong>Form Data:</strong>{' '}
  <pre>{JSON.stringify(testFormData, null, 2)}</pre>
  <strong>Errors:</strong> <pre>{JSON.stringify(errors, null, 2)}</pre>
</div>
</div>
); }

Validation Rule Types​

Required Validation​

Ensures a field has a value:

const requiredRule = {
  type: 'required',
  message: 'This field is required',
};

Min/Max Validation​

Validates minimum and maximum values for strings and numbers:

// String length validation
const minLengthRule = {
  type: 'min',
  value: 3,
  message: 'Must be at least 3 characters',
};
// Number value validation
const maxValueRule = {
  type: 'max',
  value: 100,
  message: 'Value must be less than 100',
};

Pattern Validation​

Uses regular expressions for complex validation:

// Email validation
const emailRule = {
  type: 'pattern',
  value: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$',
  message: 'Invalid email format',
};
// Phone number validation
const phoneRule = {
  type: 'pattern',
  value: '^\\+?[1-9]\\d{1,14}$',
  message: 'Invalid phone number format',
};

Custom Validation​

Allows custom validation functions:

const customRule = {
  type: 'custom',
  value: value => {
    // Custom validation logic
    return value.includes('@') && value.length > 5;
  },
  message: 'Must contain @ and be longer than 5 characters',
};

Field Configuration​

Fields can be configured with multiple validation rules:

const fieldConfig = {
  name: 'username',
  label: 'Username',
  type: 'text',
  validation: [
    { type: 'required', message: 'Username is required' },
    { type: 'min', value: 3, message: 'Must be at least 3 characters' },
    { type: 'max', value: 20, message: 'Must be less than 20 characters' },
    {
  type: 'pattern',
  value: '^[a-zA-Z0-9_]+$',
  message: 'Only letters, numbers, and underscores allowed',
    },
  ],
};

Form Validation​

Validate entire forms with multiple fields:

const formFields = [
  {
    name: 'email',
    label: 'Email',
    type: 'email',
    validation: [
  { type: 'required', message: 'Email is required' },
  {
  type: 'pattern',
  value: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$',
  message: 'Invalid email',
  },
    ],
  },
  {
    name: 'password',
    label: 'Password',
    type: 'password',
    validation: [
  { type: 'required', message: 'Password is required' },
  { type: 'min', value: 8, message: 'Must be at least 8 characters' },
    ],
  },
];
const formData = {
  email: 'user@example.com',
  password: 'secret123',
};
const errors = validateForm(formData, formFields);
// Returns: {} (no errors) or { email: 'error message', password: 'error message' }

Integration with Forms​

The validation utilities work seamlessly with form components:

import { SimpleForm, validateForm } from '@react-superadmin/web';
const formFields = [
  {
    name: 'name',
    label: 'Name',
    type: 'text',
    validation: [{ type: 'required', message: 'Name is required' }],
  },
  {
    name: 'email',
    label: 'Email',
    type: 'email',
    validation: [
  { type: 'required', message: 'Email is required' },
  {
  type: 'pattern',
  value: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$',
  message: 'Invalid email',
  },
    ],
  },
];
function MyForm() {
  const handleSubmit = values => {
    // Validate form before submission
    const errors = validateForm(values, formFields);
    if (Object.keys(errors).length === 0) {
  // Form is valid, proceed with submission
  console.log('Form submitted:', values);
    } else {
  // Handle validation errors
  console.log('Validation errors:', errors);
  };
  return <SimpleForm fields={formFields} onSubmit={handleSubmit} />;
}

Error Handling​

The validation utilities return clear error messages:

const fieldConfig = {
  name: 'age',
  validation: [
    { type: 'required', message: 'Age is required' },
    { type: 'min', value: 18, message: 'Must be at least 18 years old' },
  ],
};
// Empty value
const error1 = validateField('', fieldConfig);
console.log(error1); // "Age is required"
// Invalid value
const error2 = validateField('16', fieldConfig);
console.log(error2); // "Must be at least 18 years old"
// Valid value
const error3 = validateField('25', fieldConfig);
console.log(error3); // null

TypeScript Support​

The validation utilities provide full TypeScript support:

import { ValidationRule, FieldConfig } from '@react-superadmin/core';
interface ValidationRule {
  type: 'required' | 'min' | 'max' | 'pattern' | 'custom';
  value?: number | string | ((value: any) => boolean);
  message: string;
}
interface FieldConfig {
  name: string;
  label: string;
  type: string;
  validation?: ValidationRule[];
}
// Type-safe validation
const field: FieldConfig = {
  name: 'email',
  label: 'Email',
  type: 'email',
  validation: [
    { type: 'required', message: 'Email is required' },
    {
  type: 'pattern',
  value: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$',
  message: 'Invalid email',
    },
  ],
};