كيفية إضافة التحقق من صحة النماذج في React باستخدام React Hook Form

Updated يونيو 7, 2026 6 min read

Aldawsari

دقائق القراءة: 6

يُعد بناء النماذج التفاعلية في تطبيقات React من المهام الأساسية، لكن التحدي الحقيقي يبدأ عند إضافة Form Validation بشكل منظم وسهل الصيانة. في هذا الدليل العملي، ستتعرّف على طريقة إنشاء نموذج باستخدام Semantic UI، ثم ربطه بمكتبة React Hook Form لإدارة الحقول والتحقق من صحة البيانات بكفاءة عالية.

شرح إضافة التحقق من صحة النماذج في React باستخدام React Hook Form

لماذا نستخدم React Hook Form في نماذج React؟

عند التعامل مع النماذج في React، قد تصبح إدارة القيم والأخطاء وشروط التحقق معقدة بسرعة، خاصة عندما يزداد عدد الحقول. هنا تظهر فائدة React Hook Form، إذ توفر أسلوبًا خفيفًا ومرنًا لتسجيل الحقول، والتحقق من صحتها، والتعامل مع الأخطاء دون كتابة منطق طويل ومكرر.

تقليل حجم الكود المطلوب لإدارة النماذج.
تحسين الأداء عبر تقليل عمليات إعادة التصيير غير الضرورية.
سهولة إضافة قواعد التحقق مثل required وmaxLength وpattern.
ملاءمتها لتطبيقات React web وReact Native.

إنشاء نموذج أساسي باستخدام Semantic UI

سنبدأ بإنشاء نموذج يحتوي على أربعة حقول: الاسم الأول، الاسم الأخير، البريد الإلكتروني، وكلمة المرور. قبل ذلك، ثبّت مكتبة Semantic UI بالأمر المناسب لمشروعك:

yarn add semantic-ui-react semantic-ui-css

## Or NPM
npm install semantic-ui-react semantic-ui-css

بعد اكتمال التثبيت، أضف ملف التنسيق داخل index.js لأنه نقطة الدخول الرئيسية للتطبيق:

import 'semantic-ui-css/semantic.min.css'

الآن أنشئ النموذج الأولي بالكود التالي:

import React from 'react';
import { Form, Button } from 'semantic-ui-react';

export default function FormValidation() {
  return (
    <div>
      <Form>
        <Form.Field>
          <label>First Name</label>
          <input placeholder='First Name' type="text" />
        </Form.Field>

        <Form.Field>
          <label>Last Name</label>
          <input placeholder='Last Name' type="text" />
        </Form.Field>

        <Form.Field>
          <label>Email</label>
          <input placeholder='Email' type="email" />
        </Form.Field>

        <Form.Field>
          <label>Password</label>
          <input placeholder='Password' type="password" />
        </Form.Field>

        <Button type='submit'>Submit</Button>
      </Form>
    </div>
  );
}

بهذا أصبح لدينا نموذج جاهز من الناحية البصرية، لكنه لا يزال يفتقر إلى تسجيل البيانات أو التحقق من صحة المدخلات.

واجهة نموذج أساسي في React باستخدام Semantic UI

تثبيت React Hook Form وربطه بالنموذج

لإضافة منطق إدارة الحقول والتحقق من صحتها، ثبّت مكتبة React Hook Form:

npm install react-hook-form

بعدها استورد الدالة useForm داخل المكوّن:

import { useForm } from 'react-hook-form';

ثم فكّك القيم الأساسية التي سنحتاجها:

const {
  register,
  handleSubmit,
  formState: { errors }
} = useForm();

كل عنصر هنا له دور مهم:

register: لتسجيل الحقول وربطها بالمكتبة.
handleSubmit: لمعالجة إرسال النموذج بعد التحقق.
errors: للوصول إلى أخطاء التحقق وعرض الرسائل المناسبة.

تسجيل الحقول داخل النموذج

لكي تتمكن المكتبة من قراءة بيانات الحقول، يجب تمرير register لكل input. مثال على ذلك:

<Form.Field>
  <label>First Name</label>
  <input
    placeholder='First Name'
    type='text'
    {...register('firstName')}
  />
</Form.Field>

لاحظ أن الحقل أصبح مرتبطًا بالمفتاح firstName. كرر ذلك مع بقية الحقول:

import React from 'react';
import { Form, Button } from 'semantic-ui-react';
import { useForm } from 'react-hook-form';

export default function FormValidation() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  return (
    <div>
      <Form>
        <Form.Field>
          <label>First Name</label>
          <input placeholder='First Name' type='text' {...register('firstName')} />
        </Form.Field>

        <Form.Field>
          <label>Last Name</label>
          <input placeholder='Last Name' type='text' {...register('lastName')} />
        </Form.Field>

        <Form.Field>
          <label>Email</label>
          <input placeholder='Email' type='email' {...register('email')} />
        </Form.Field>

        <Form.Field>
          <label>Password</label>
          <input placeholder='Password' type='password' {...register('password')} />
        </Form.Field>

        <Button type='submit'>Submit</Button>
      </Form>
    </div>
  );
}

التعامل مع إرسال النموذج في React

الخطوة التالية هي ربط حدث الإرسال onSubmit بالنموذج حتى نستقبل البيانات عند النقر على زر Submit.

<Form onSubmit={handleSubmit(onSubmit)}>

بعدها أنشئ الدالة المسؤولة عن استلام البيانات:

const {
  register,
  handleSubmit,
  formState: { errors }
} = useForm();

const onSubmit = (data) => {
  console.log(data);
};

بهذه الطريقة، ستظهر قيم الحقول في console مباشرة بعد إرسال النموذج بنجاح.

عرض بيانات النموذج في console بعد الإرسال باستخدام React Hook Form

كيفية إضافة Form Validation إلى حقول النموذج

الآن نصل إلى الجزء الأهم: إضافة قواعد التحقق من صحة البيانات. سنبدأ بالاسم الأول والاسم الأخير، ثم ننتقل إلى البريد الإلكتروني وكلمة المرور.

التحقق من الاسم الأول والاسم الأخير

يمكنك استخدام خصائص مثل required وmaxLength بشكل مباشر داخل register. هذا يضمن أن الحقل إلزامي وألا يتجاوز عدد الأحرف الحد المسموح.

<input
  placeholder='First Name'
  type="text"
  {...register("firstName", { required: true, maxLength: 10 })}
/>

بعد ذلك، أضف رسالة خطأ تُعرض عند فشل التحقق:

{errors.firstName && <p>Please check the First Name</p>}

عند إرسال النموذج دون إدخال الاسم الأول، أو عند تجاوز 10 أحرف، ستظهر رسالة الخطأ.

رسالة خطأ التحقق من حقل الاسم الأول في React Hook Form

يمكن تطبيق الفكرة نفسها على حقل Last Name أيضًا.

مثال على التحقق من عدد أحرف الاسم الأخير في نموذج React

التحقق من البريد الإلكتروني باستخدام Pattern

في حقل البريد الإلكتروني، نحتاج إلى التحقق من تنسيق الإدخال. هنا نستخدم الخاصية pattern التي تعتمد على Regular Expression لمطابقة الصيغة الصحيحة للبريد الإلكتروني.

pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

وربطه داخل الحقل يكون بهذا الشكل:

<Form.Field>
  <label>Email</label>
  <input
    placeholder='Email'
    type='email'
    {...register('email', {
      required: true,
      pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
    })}
  />
</Form.Field>

إذا أدخل المستخدم بريدًا إلكترونيًا غير صالح، فسيظهر الخطأ مباشرة، ويختفي تلقائيًا عند كتابة صيغة صحيحة.

خطأ تنسيق البريد الإلكتروني في React Hook Form نجاح التحقق من البريد الإلكتروني بعد إدخال صيغة صحيحة

التحقق من كلمة المرور باستخدام Regular Expression

في هذا المثال، يجب أن تحتوي كلمة المرور على:

حرف كبير واحد على الأقل.
حرف صغير واحد على الأقل.
رقم واحد على الأقل.
طول بين 6 و15 حرفًا.

يمكن تطبيق ذلك باستخدام pattern كما يلي:

<Form.Field>
  <label>Password</label>
  <input
    placeholder='Password'
    type='password'
    {...register('password', {
      required: true,
      pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/,
    })}
  />
</Form.Field>

{errors.password && <p>Please check the Password</p>}

هذه القاعدة مناسبة للنماذج التي تتطلب حدًا أدنى من الأمان، كما تمنح المستخدم ملاحظات واضحة عند الإدخال الخاطئ.

الكود الكامل لإضافة التحقق من صحة النموذج

بعد جمع كل الأجزاء السابقة، يصبح لدينا نموذج متكامل مع التحقق من كافة الحقول:

import React from 'react';
import { Form, Button } from 'semantic-ui-react';
import { useForm } from 'react-hook-form';

export default function FormValidation() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <Form.Field>
          <label>First Name</label>
          <input
            placeholder='First Name'
            type='text'
            {...register('firstName', { required: true, maxLength: 10 })}
          />
        </Form.Field>
        {errors.firstName && <p>Please check the First Name</p>}

        <Form.Field>
          <label>Last Name</label>
          <input
            placeholder='Last Name'
            type='text'
            {...register('lastName', { required: true, maxLength: 10 })}
          />
        </Form.Field>
        {errors.lastName && <p>Please check the Last Name</p>}

        <Form.Field>
          <label>Email</label>
          <input
            placeholder='Email'
            type='email'
            {...register('email', {
              required: true,
              pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            })}
          />
        </Form.Field>
        {errors.email && <p>Please check the Email</p>}

        <Form.Field>
          <label>Password</label>
          <input
            placeholder='Password'
            type='password'
            {...register('password', {
              required: true,
              pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}$/,
            })}
          />
        </Form.Field>
        {errors.password && <p>Please check the Password</p>}

        <Button type='submit'>Submit</Button>
      </Form>
    </div>
  );
}

تنسيق رسائل الخطأ في نموذج React بعد إضافة Form Validation

أفضل ممارسات لتحسين تجربة المستخدم في Form Validation

إضافة التحقق من صحة النموذج لا تكفي وحدها، بل يجب أن تكون الرسائل مفهومة وتجربة الاستخدام مريحة. إليك بعض التوصيات العملية:

استخدم رسائل خطأ واضحة تصف المشكلة بدقة.
اجعل التحقق يحدث في الوقت المناسب دون إزعاج المستخدم.
لا تعتمد على التحقق في الواجهة فقط، بل أضف تحققًا في الخادم أيضًا.
حافظ على بساطة الحقول وتجنب طلب بيانات غير ضرورية.
نسّق رسائل الخطأ بلون مميز مع الحفاظ على وضوح القراءة.

الخلاصة التقنية

تُعد React Hook Form من أفضل الخيارات لإدارة النماذج في React بفضل خفتها وسهولة دمجها مع الحقول وقواعد التحقق المختلفة. الميزة الأهم أنها تمنحك بنية نظيفة وقابلة للتوسع دون تعقيد زائد في الكود. ومن الناحية العملية، فإن الجمع بين Semantic UI وReact Hook Form يوفّر تجربة تطوير سريعة، مع واجهة أنيقة وآلية تحقق فعالة. تجدر الإشارة إلى أن React Hook Form تعمل مع Functional Components فقط، وليس مع Class Components.