react-vite-themes/dist/utils/validation.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

export const validateField = (value, rules, allValues) => {
    const errors = [];
    // Required validation
    if (rules.required && (!value || (typeof value === 'string' && value.trim() === ''))) {
        errors.push('This field is required');
    }
    // Skip other validations if value is empty and not required
    if (!value && !rules.required) {
        return { isValid: true, errors: [] };
    }
    // String validations
    if (typeof value === 'string') {
        // Min length
        if (rules.minLength && value.length < rules.minLength) {
            errors.push(`Minimum length is ${rules.minLength} characters`);
        }
        // Max length
        if (rules.maxLength && value.length > rules.maxLength) {
            errors.push(`Maximum length is ${rules.maxLength} characters`);
        }
        // Pattern validation
        if (rules.pattern && !rules.pattern.test(value)) {
            errors.push('Invalid format');
        }
        // Email validation
        if (rules.email) {
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(value)) {
                errors.push('Please enter a valid email address');
            }
        }
        // URL validation
        if (rules.url) {
            try {
                new URL(value);
            }
            catch {
                errors.push('Please enter a valid URL');
            }
        }
    }
    // Number validations
    if (typeof value === 'number' || !isNaN(Number(value))) {
        const numValue = Number(value);
        if (rules.min !== undefined && numValue < rules.min) {
            errors.push(`Minimum value is ${rules.min}`);
        }
        if (rules.max !== undefined && numValue > rules.max) {
            errors.push(`Maximum value is ${rules.max}`);
        }
    }
    // Custom validation
    if (rules.custom) {
        const customError = rules.custom(value, allValues);
        if (customError) {
            errors.push(customError);
        }
    }
    return {
        isValid: errors.length === 0,
        errors
    };
};
export const validateForm = (values, validationSchema) => {
    const results = {};
    for (const [fieldName, rules] of Object.entries(validationSchema)) {
        results[fieldName] = validateField(values[fieldName], rules, values);
    }
    return results;
};
export const isFormValid = (validationResults) => {
    return Object.values(validationResults).every(result => result.isValid);
};
// Common validation patterns
export const VALIDATION_PATTERNS = {
    EMAIL: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    PHONE: /^[\+]?[1-9][\d]{0,15}$/,
    PASSWORD: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{8,}$/,
    URL: /^https?:\/\/.+/,
    ALPHANUMERIC: /^[a-zA-Z0-9]+$/,
    ALPHA_ONLY: /^[a-zA-Z\s]+$/,
    NUMERIC: /^[0-9]+$/,
    DECIMAL: /^[0-9]+(\.[0-9]+)?$/
};
// Common validation rules
export const VALIDATION_RULES = {
    REQUIRED: { required: true },
    EMAIL: { required: true, email: true },
    PASSWORD: { required: true, minLength: 8, pattern: VALIDATION_PATTERNS.PASSWORD },
    PHONE: { required: true, pattern: VALIDATION_PATTERNS.PHONE },
    URL: { required: true, url: true },
    NAME: { required: true, pattern: VALIDATION_PATTERNS.ALPHA_ONLY, minLength: 2 },
    USERNAME: { required: true, pattern: VALIDATION_PATTERNS.ALPHANUMERIC, minLength: 3, maxLength: 20 }
};