كيفية عمل real time validation في Laravel Livewire

أولا يجب إضافة قواعد التحقق في المُكون بالشكل التالي مثلاً:

protected $rules = [
  'title' => 'required|min:10',
  'description' => 'required'
];

بعد ذلك تستدعي دالة التحقق في الدالة addTask:

<?php
public function addTask()
{
  $this->validate();
  
  // ...
  
}

ثم تضيف التابع updated للمُكون ليُصبح بالشكل التالي:

<?php
class AppAddTask extends Component
{
  public $title;
  public $description;

  protected $rules = [
    'title' => 'required|min:10',
    'description' => 'required'
  ];


  public function render()
  {
    return view('livewire.app-add-task');
  }

  public function updated($property)
  {
    $this->validateOnly($property);
  }

  public function addTask()
  {

    $this->validate();
    // ...
  }
}

ثم في صفحة عرض المُكون تعرض رسائل الخطأ:

<div>
  <h3 class="text-center">Add New Task</h3>
  <div class="form-group">
    <label for="title">Title</label>
    <input type="text" wire:model="title" class="form-control @error('title') is-invalid @enderror">
    @error('title') 
    <span class="error" role="alert">
      <strong class="text-danger">{{ $message }}</strong>
    </span>
    @enderror
  </div>

  <div class="form-group">
    <label for="description">Description</label>
    <textarea wire:model="description" class="form-control @error('description') is-invalid @enderror"></textarea>
    @error('description') 
    <span class="error" role="alert">
      <strong class="text-danger">{{ $message }}</strong>
    </span>
    @enderror
  </div>

  <div class="form-group">
    <button wire:click.prevent="addTask" class="btn btn-primary btn-block">Add</button>
  </div>
</div>

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

أريد أن أضيف ملاحظة صغيرة على الجواب الممتاز الذي ذكره المدرب عبود:

إذا كنت تتساءل ، "لماذا أستخدم الدالة validateOnly؟ مع العلم أنني ممكن أستخدم validate؟"

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

. ValidateOnly يمنع ذلك ، ويتحقق فقط من صحة الحقل الحالي الجاري تحديثه