كيفية بناء نموذج تفاعلي مع التحقق في React

const initialValues = {
  name:     '',
  email:    '',
  password: '',
  role:     'user',
};

function SignupForm() {
  const [formData, setFormData] = useState(initialValues);

  function handleChange(e) {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  }

  // جميع المدخلات تشترك في هذا المعالج الواحد عبر خاصية `name`
}

return (
  <form onSubmit={handleSubmit}>
    <div>
      <label htmlFor="name">الاسم</label>
      <input
        id="name"
        name="name"
        type="text"
        value={formData.name}
        onChange={handleChange}
      />
    </div>

    <div>
      <label htmlFor="email">البريد الإلكتروني</label>
      <input
        id="email"
        name="email"
        type="email"
        value={formData.email}
        onChange={handleChange}
      />
    </div>

    <div>
      <label htmlFor="password">كلمة المرور</label>
      <input
        id="password"
        name="password"
        type="password"
        value={formData.password}
        onChange={handleChange}
      />
    </div>

    <button type="submit">إنشاء حساب</button>
  </form>
);

function validate(values) {
  const errors = {};

  if (!values.name.trim()) {
    errors.name = 'الاسم مطلوب.';
  }

  if (!values.email.trim()) {
    errors.email = 'البريد الإلكتروني مطلوب.';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
    errors.email = 'أدخل بريداً إلكترونياً صالحاً.';
  }

  if (!values.password) {
    errors.password = 'كلمة المرور مطلوبة.';
  } else if (values.password.length < 8) {
    errors.password = 'كلمة المرور يجب أن تكون 8 أحرف على الأقل.';
  }

  return errors; // كائن فارغ = صالح
}

const [errors,  setErrors]  = useState({});
const [touched, setTouched] = useState({});

function handleBlur(e) {
  const { name } = e.target;
  setTouched(prev => ({ ...prev, [name]: true }));

  // تحقق من الحقل الذي تم لمسه فقط
  const fieldErrors = validate(formData);
  setErrors(prev => ({ ...prev, [name]: fieldErrors[name] }));
}

// في JSX، أسفل كل مدخل:
// {touched.email && errors.email && (
//   <span id="email-error" role="alert">{errors.email}</span>
// )}
//
// على المدخل نفسه:
// aria-describedby={errors.email ? 'email-error' : undefined}
// aria-invalid={!!errors.email}

const [submitting, setSubmitting] = useState(false);

async function handleSubmit(e) {
  e.preventDefault();

  const fieldErrors = validate(formData);
  if (Object.keys(fieldErrors).length > 0) {
    setErrors(fieldErrors);
    // اجعل جميع الحقول مُلمَسة حتى تظهر الأخطاء
    setTouched({ name: true, email: true, password: true, role: true });
    return;
  }

  setSubmitting(true);
  try {
    await api.signup(formData);
    setFormData(initialValues);   // امسح النموذج عند النجاح
    setErrors({});
    setTouched({});
    // انتقل أو اعرض رسالة نجاح
  } catch (err) {
    setErrors({ form: err.message }); // خطأ على مستوى الخادم
  } finally {
    setSubmitting(false);
  }
}

<button
  type="submit"
  disabled={submitting}
  aria-busy={submitting}
>
  {submitting ? 'جاري إنشاء الحساب...' : 'إنشاء حساب'}
</button>

{/* اعرض أخطاء مستوى الخادم فوق الزر */}
{errors.form && (
  <p role="alert" style={{ color: 'red' }}>{errors.form}</p>
)}

import { useState } from 'react';

const initialValues = { name: '', email: '', password: '' };

function validate(v) {
  const e = {};
  if (!v.name.trim())   e.name     = 'الاسم مطلوب.';
  if (!v.email.trim())  e.email    = 'البريد الإلكتروني مطلوب.';
  else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.email))
                        e.email    = 'أدخل بريداً صالحاً.';
  if (!v.password)      e.password = 'كلمة المرور مطلوبة.';
  else if (v.password.length < 8)
                        e.password = '8 أحرف على الأقل.';
  return e;
}

export function SignupForm() {
  const [formData,   setFormData]   = useState(initialValues);
  const [errors,     setErrors]     = useState({});
  const [touched,    setTouched]    = useState({});
  const [submitting, setSubmitting] = useState(false);
  const [success,    setSuccess]    = useState(false);

  const handleChange = e => {
    const { name, value } = e.target;
    setFormData(p => ({ ...p, [name]: value }));
  };

  const handleBlur = e => {
    const { name } = e.target;
    setTouched(p => ({ ...p, [name]: true }));
    setErrors(p => ({ ...p, [name]: validate(formData)[name] }));
  };

  const handleSubmit = async e => {
    e.preventDefault();
    const errs = validate(formData);
    if (Object.keys(errs).length) {
      setErrors(errs);
      setTouched({ name: true, email: true, password: true });
      return;
    }
    setSubmitting(true);
    try {
      await fakeApi(formData);
      setFormData(initialValues);
      setErrors({});
      setTouched({});
      setSuccess(true);
    } catch (err) {
      setErrors({ form: err.message });
    } finally {
      setSubmitting(false);
    }
  };

  if (success) return <p>تم إنشاء الحساب بنجاح!</p>;

  return (
    <form onSubmit={handleSubmit} noValidate>
      {['name', 'email', 'password'].map(field => (
        <div key={field}>
          <label htmlFor={field}>{field}</label>
          <input
            id={field} name={field}
            type={field === 'password' ? 'password' : field === 'email' ? 'email' : 'text'}
            value={formData[field]}
            onChange={handleChange}
            onBlur={handleBlur}
            aria-invalid={!!(touched[field] && errors[field])}
            aria-describedby={errors[field] ? `${field}-err` : undefined}
          />
          {touched[field] && errors[field] && (
            <span id={`${field}-err`} role="alert">{errors[field]}</span>
          )}
        </div>
      ))}
      {errors.form && <p role="alert">{errors.form}</p>}
      <button type="submit" disabled={submitting}>
        {submitting ? 'جاري الحفظ...' : 'إنشاء حساب'}
      </button>
    </form>
  );
}

// نسخة react-hook-form لنفس النموذج
import { useForm } from 'react-hook-form';

function SignupForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset,
  } = useForm();

  const onSubmit = async (data) => {
    await fakeApi(data);
    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <input
        type="text"
        {...register('name', { required: 'الاسم مطلوب.' })}
        aria-invalid={!!errors.name}
      />
      {errors.name && <span role="alert">{errors.name.message}</span>}

      <input
        type="email"
        {...register('email', {
          required: 'البريد الإلكتروني مطلوب.',
          pattern:  { value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: 'بريد غير صالح.' },
        })}
        aria-invalid={!!errors.email}
      />
      {errors.email && <span role="alert">{errors.email.message}</span>}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'جاري الحفظ...' : 'إنشاء حساب'}
      </button>
    </form>
  );
}