react-tailwind-form-validator/dist/context/FormContext.jsx

A lightweight and customizable React form validation library built with Tailwind CSS for modern, responsive, and accessible forms.

import React, { createContext, useState } from 'react';
export const FormContext = createContext(null);
export const FormProvider = ({ children }) => {
    const [formData, setFormData] = useState({});
    const [inputValidityState, setInputValidityState] = useState({});
    const updateFormData = (fieldKey, value) => {
        setFormData((prev) => ({
            ...prev,
            [fieldKey]: value,
        }));
    };
    const setInputValidity = (fieldKey, isValid) => {
        setInputValidityState((prev) => ({
            ...prev,
            [fieldKey]: isValid,
        }));
    };
    const areInputsValid = () => {
        // console.log('inputValidityState : ', inputValidityState);
        if (Object.keys(inputValidityState).length === 0) {
            return false;
        }
        // Check if ALL registered fields are valid
        return Object.keys(inputValidityState).every((key) => {
            const fieldValid = inputValidityState[key];
            const fieldValue = formData[key];
            return (fieldValid &&
                fieldValue !== undefined &&
                fieldValue !== null &&
                fieldValue.trim() !== '');
        });
    };
    const revalidate = () => {
        // Ultra pro max checks for safety
        Object.keys(formData).forEach((key) => {
            const fieldValue = formData[key];
            const isValid = fieldValue !== undefined &&
                fieldValue !== null &&
                fieldValue.trim() !== '';
            setInputValidity(key, isValid);
        });
    };
    return (<FormContext.Provider value={{
            formData,
            inputValidity: inputValidityState,
            updateFormData,
            setInputValidity,
            areInputsValid,
            revalidate,
        }}>
      {children}
    </FormContext.Provider>);
};