إتقان التحقق من صحة النماذج في React: منسق التحقق `useFormState`

            // validators.js

export const required = (message = 'This field is required') => (value) => {
  if (!value) {
    return message;
  }
  return null;
};

export const minLength = (length, message = `Must be at least ${length} characters`) => (value) => {
  if (value && value.length < length) {
    return message;
  }
  return null;
};

export const isEmail = (message = 'Please enter a valid email address') => (value) => {
  // Basic email regex - for production, consider more robust options
  const emailRegex = /^[\S]+@\S+\.\S+$/;
  if (value && !emailRegex.test(value)) {
    return message;
  }
  return null;
};

export const equals = (otherField, message) => (value, formValues) => {
  if (value !== formValues[otherField]) {
    return message;
  }
  return null;
};

// Internationalization note: In a real app, messages would come from an i18n system.

            

              
                Copy
              
            
          

            // formSchema.js

import { required, minLength, isEmail, equals } from './validators';

export const registrationSchema = {
  username: [
    required('Username is mandatory.'),
    minLength(3, 'Username must be at least 3 characters long.')
  ],
  email: [
    required('Email is required.'),
    isEmail('Please enter a valid email address.')
  ],
  password: [
    required('Password is required.'),
    minLength(8, 'Password must be at least 8 characters long.')
  ],
  confirmPassword: [
    required('Please confirm your password.'),
    equals('password', 'Passwords do not match.')
  ]
};

            

              
                Copy
              
            
          

            // useFormState.js

import { useState, useCallback } from 'react';

// Helper function to validate a single field
const validateField = (value, rules, formValues) => {
  for (const rule of rules) {
    const errorMessage = rule(value, formValues);
    if (errorMessage) {
      return errorMessage;
    }
  }
  return null;
};

// Helper function to validate the entire form
const validateForm = (values, schema) => {
  const errors = {};
  let isFormValid = true;

  Object.keys(schema).forEach(field => {
    const fieldRules = schema[field];
    const value = values[field];
    const errorMessage = validateField(value, fieldRules, values);
    errors[field] = errorMessage;
    if (errorMessage) {
      isFormValid = false;
    }
  });

  return { errors, isFormValid };
};

export const useFormState = (initialValues, schema) => {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  // Handle input changes
  const handleChange = useCallback((event) => {
    const { name, value } = event.target;
    setValues(prevValues => ({
      ...prevValues,
      [name]: value
    }));

    // Optional: Validate on change for immediate feedback
    // This can be optimized to validate only after blur or on submit
    const fieldRules = schema[name];
    if (fieldRules) {
      const errorMessage = validateField(value, fieldRules, { ...values, [name]: value });
      setErrors(prevErrors => ({
        ...prevErrors,
        [name]: errorMessage
      }));
    }
  }, [schema, values]); // Depend on values to get the latest form state for cross-field validation

  // Handle blur events for validation
  const handleBlur = useCallback((event) => {
    const { name } = event.target;
    const fieldRules = schema[name];
    if (fieldRules) {
      const errorMessage = validateField(values[name], fieldRules, values);
      setErrors(prevErrors => ({
        ...prevErrors,
        [name]: errorMessage
      }));
    }
  }, [values, schema]);

  // Handle form submission
  const handleSubmit = useCallback(async (submitHandler) => {
    setIsSubmitting(true);
    const { errors: formErrors, isFormValid } = validateForm(values, schema);
    setErrors(formErrors);

    if (isFormValid) {
      try {
        await submitHandler(values);
      } catch (error) {
        console.error('Form submission error:', error);
        // Handle server-side errors if necessary
      } finally {
        setIsSubmitting(false);
      }
    } else {
      setIsSubmitting(false);
    }
  }, [values, schema]);

  // Function to manually trigger validation for a specific field or all fields
  const validate = useCallback((fieldName) => {
    if (fieldName) {
      const fieldRules = schema[fieldName];
      if (fieldRules) {
        const errorMessage = validateField(values[fieldName], fieldRules, values);
        setErrors(prevErrors => ({
          ...prevErrors,
          [fieldName]: errorMessage
        }));
        return !errorMessage;
      }
      return true; // Field not found in schema, assume valid
    } else {
      // Validate all fields
      const { errors: allFormErrors, isFormValid } = validateForm(values, schema);
      setErrors(allFormErrors);
      return isFormValid;
    }
  }, [values, schema]);

  return {
    values,
    errors,
    isSubmitting,
    handleChange,
    handleBlur,
    handleSubmit,
    validate
  };
};

            

              
                Copy
              
            
          

            // RegistrationForm.js

import React from 'react';
import { useFormState } from './useFormState';
import { registrationSchema } from './formSchema';

const initialFormValues = {
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
};

const RegistrationForm = () => {
  const {
    values,
    errors,
    isSubmitting,
    handleChange,
    handleBlur,
    handleSubmit,
    validate
  } = useFormState(initialValues, registrationSchema);

  const handleActualSubmit = async (formData) => {
    console.log('Form submitted with:', formData);
    // Simulate an API call
    await new Promise(resolve => setTimeout(resolve, 1500));
    alert('Registration successful!');
    // Reset form or redirect user
  };

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      handleSubmit(handleActualSubmit);
    }}>
      <div>
        <label htmlFor="username">Username:</label>
        <input
          type="text"
          id="username"
          name="username"
          value={values.username}
          onChange={handleChange}
          onBlur={handleBlur}
          aria-invalid={!!errors.username}
          aria-describedby={errors.username ? "username-error" : undefined}
        />
        {errors.username && <span id="username-error" style={{ color: 'red' }}>{errors.username}</span>}
      </div>

      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={values.email}
          onChange={handleChange}
          onBlur={handleBlur}
          aria-invalid={!!errors.email}
          aria-describedby={errors.email ? "email-error" : undefined}
        />
        {errors.email && <span id="email-error" style={{ color: 'red' }}>{errors.email}</span>}
      </div>

      <div>
        <label htmlFor="password">Password:</label>
        <input
          type="password"
          id="password"
          name="password"
          value={values.password}
          onChange={handleChange}
          onBlur={handleBlur}
          aria-invalid={!!errors.password}
          aria-describedby={errors.password ? "password-error" : undefined}
        />
        {errors.password && <span id="password-error" style={{ color: 'red' }}>{errors.password}</span>}
      </div>

      <div>
        <label htmlFor="confirmPassword">Confirm Password:</label>
        <input
          type="password"
          id="confirmPassword"
          name="confirmPassword"
          value={values.confirmPassword}
          onChange={handleChange}
          onBlur={handleBlur}
          aria-invalid={!!errors.confirmPassword}
          aria-describedby={errors.confirmPassword ? "confirmPassword-error" : undefined}
        />
        {errors.confirmPassword && <span id="confirmPassword-error" style={{ color: 'red' }}>{errors.confirmPassword}</span>}
      </div>

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Registering...' : 'Register'}
      </button>
    </form>
  );
};

export default RegistrationForm;

            

              
                Copy
              
            
          

            
// In your i18n setup (e.g., i18n.js)
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// ... i18n configuration ...

// validators.js (modified)
export const required = (translationKey = 'common:fieldRequired') => (value) => {
  if (!value) {
    return i18n.t(translationKey);
  }
  return null;
};

export const minLength = (length, translationKey = 'common:minLength') => (value) => {
  if (value && value.length < length) {
    return i18n.t(translationKey, { count: length }); // Pass interpolation arguments
  }
  return null;
};

// formSchema.js (modified)
// Assuming you have translations for 'registration:usernameRequired', 'registration:usernameMinLength', etc.
export const registrationSchema = {
  username: [
    required('registration:usernameRequired'),
    minLength(3, 'registration:usernameMinLength')
  ],
  // ...
};

            

              
                Copy
              
            
          

            
// validators.js (simplified date validator)
import { parse, isValid } from 'date-fns';

export const isLocaleDate = (localeFormat, message = 'Invalid date format') => (value) => {
  if (value) {
    const parsedDate = parse(value, localeFormat, new Date());
    if (!isValid(parsedDate)) {
      return message;
    }
  }
  return null;
};

// In your component or hook, determine format based on locale
// const userLocale = getUserLocale(); // Function to get user's locale
// const dateFormat = userLocale === 'en-US' ? 'MM/dd/yyyy' : 'dd/MM/yyyy';
// ... use isLocaleDate(dateFormat, 'Invalid date') in your schema ...

            

              
                Copy
              
            
          

            // ... inside useFormState hook ...

const [asyncValidating, setAsyncValidating] = useState({});

// ... in validation execution logic ...

const executeAsyncValidation = async (field, value, asyncRule) => {
  setAsyncValidating(prev => ({ ...prev, [field]: true }));
  try {
    const errorMessage = await asyncRule(value, values);
    setErrors(prevErrors => ({ ...prevErrors, [field]: errorMessage }));
  } catch (error) {
    console.error(`Async validation error for ${field}:`, error);
    setErrors(prevErrors => ({ ...prevErrors, [field]: 'Validation failed.' }));
  } finally {
    setAsyncValidating(prev => ({ ...prev, [field]: false }));
  }
};

// Modify validateField and validateForm to call async rules and handle Promises.
// This significantly increases complexity and might warrant a dedicated validation library.

// Example async validator
export const isUniqueUsername = async (message = 'Username is already taken') => async (value, formValues) => {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 500));
  if (value === 'admin') { // Example: 'admin' is taken
    return message;
  }
  return null;
};

// In schema:
// username: [
//   required('Username is required'),
//   minLength(3, 'Username too short'),
//   isUniqueUsername('Username already exists') // This would need to be an async function
// ]

            

              
                Copy