الأحداث في JavaScript: حدث submit

في هذا الدرس، سنتعلم كيفية استخدام حدث `submit` في JavaScript للتعامل مع عمليات إرسال النماذج والتحقق من البيانات قبل الإرسال.

 حدث submit

يُستخدم حدث `submit` على عناصر النموذج (`form`) في HTML، ويتم تنفيذه عندما يقوم المستخدم بالنقر على زر إرسال النموذج. يمكن استخدامه للتحقق من صحة البيانات المدخلة قبل إرسال النموذج.

```javascript
// استهداف عنصر النموذج
var _form = document.getElementById('searchForm');

// إضافة مستمع لحدث submit
_form.addEventListener('submit', function(e) {
// منع السلوك الافتراضي لإرسال النموذج
e.preventDefault();

var _form = this,
_error = _form.querySelector('.error'),
errorMessage = 'الحقل لا يمكن أن يكون فارغاً',
_search = _form.querySelector('#search');

// التحقق من أن قيمة البحث ليست فارغة أو غير معرفة
if (_search.value != '' && _search.value != null) {
// إرسال النموذج إذا كانت القيمة صالحة
_form.submit();
} else {
// عرض رسالة الخطأ إذا كانت القيمة فارغة
if (_error != null) {
_error.innerHTML = errorMessage;
} else {
var errorElement = document.createElement('p');
errorElement.classList.add('error');
errorElement.innerText = errorMessage;
_form.append(errorElement);
}
// تركيز المستخدم على حقل البحث
_search.focus();
}

// إلغاء إرسال النموذج بشكل افتراضي
return false;
});
```

الخلاصة

باستخدام هذا الشرح، يمكنك الآن فهم كيفية استخدام حدث submit في JavaScript لضمان تحقق البيانات قبل إرسال النموذج. يساعد هذا التقنية في تحسين تجربة المستخدم وتجنب إرسال النماذج غير الصالحة.