اعتبارسنجی ساده و نمایش خطا

مقدمه

اکنون که می‌توانیم داده‌ها را از طریق فرم‌ها دریافت کنیم، قدم بعدی اطمینان از صحت و اعتبار این داده‌ها قبل از ارسال آنهاست. «اعتبارسنجی» یا Validation فرآیندی است که در آن بررسی می‌کنیم که آیا داده‌های وارد شده توسط کاربر با قوانین مورد نظر ما (مثلاً خالی نبودن یک فیلد یا معتبر بودن یک آدرس ایمیل) مطابقت دارند یا خیر.

نمایش بازخورد واضح به کاربر در صورت بروز خطا، بخش مهمی از یک تجربه کاربری خوب است. در این درس، ما یاد می‌گیریم که چگونه یک منطق اعتبارسنجی ساده را پیاده‌سازی کرده و پیام‌های خطا را به صورت شرطی نمایش دهیم.

مدیریت state برای خطاها

برای مدیریت خطاها، ما می‌توانیم از یک متغیر state دیگر، معمولاً یک شیء، برای نگهداری پیام‌های خطای مربوط به هر فیلد استفاده کنیم.

JAVASCRIPT (React)

import { useState } from 'react';

function ContactForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};
    if (!formData.name) newErrors.name = 'Name is required';
    if (!formData.email) newErrors.email = 'Email is required';
    return newErrors;
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const validationErrors = validate();
    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
    } else {
      alert('Form submitted successfully!');
      setErrors({});
    }
  };

  // ... handleChange function and JSX ...
}

در این کد، ما یک state جدید به نام errors اضافه کرده‌ایم که یک شیء خالی است. تابع validate مسئولیت بررسی داده‌ها و برگرداندن یک شیء حاوی پیام‌های خطا را بر عهده دارد.

در handler مربوط به ارسال فرم (handleSubmit)، ما ابتدا validate را فراخوانی می‌کنیم. اگر خطایی وجود داشته باشد (یعنی شیء validationErrors خالی نباشد)، ما state مربوط به errors را با این شیء به‌روزرسانی می‌کنیم. در غیر این صورت، فرم را معتبر دانسته و state خطاها را پاک می‌کنیم.

نمایش شرطی پیام‌های خطا

اکنون که وضعیت خطاها را در state نگهداری می‌کنیم، می‌توانیم در `JSX` خود به صورت شرطی پیام‌های خطا را در زیر هر فیلد ورودی نمایش دهیم.

JAVASCRIPT (React)

<form onSubmit={handleSubmit}>
  <div>
    <label>Name:</label>
    <input
      type="text"
      name="name"
      value={formData.name}
      onChange={handleChange}
    />
    {errors.name && <p style={{ color: 'red' }}>{errors.name}</p>}
  </div>
  <div>
    <label>Email:</label>
    <input
      type="email"
      name="email"
      value={formData.email}
      onChange={handleChange}
    />
    {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
  </div>
  <button type="submit">Submit</button>
</form>

در اینجا، ما از یک عبارت شرطی برای نمایش پیام خطا استفاده می‌کنیم. اگر errors.name یا errors.email وجود داشته باشد، یک پاراگراف با متن خطا و رنگ قرمز نمایش داده می‌شود.

این الگو به ما اجازه می‌دهد تا یک رابط کاربری تمیز داشته باشیم که تنها در صورت نیاز، بازخورد لازم را به کاربر نمایش می‌دهد.

در این درس، با افزودن منطق اعتبارسنجی و نمایش شرطی پیام‌های خطا، فرم‌های خود را بسیار قوی‌تر و کاربرپسندتر کردیم. دیدیم که چگونه می‌توان با استفاده از یک state مجزا برای مدیریت خطاها، بازخورد واضحی به کاربر ارائه داد.

اکنون که می‌توانیم داده‌ها را از کاربر دریافت و اعتبارسنجی کنیم، در درس بعدی به «ارسال فرم و تعامل با سرور» خواهیم پرداخت و یاد می‌گیریم که چگونه داده‌های معتبر فرم را با استفاده از fetch API به یک سرور خارجی ارسال کنیم.