الاستدعاء المباشر submit() لا يطلق حدث submit ولا يشغل تحقق القيود؛ لذلك لا يصل إلى المعالج الذي ينتظر هذا الحدث. [2]
الخلاصة السريعة
ما الذي وضعناه في الاختبار؟
أنشأنا نموذجا جديدا لكل حالة، بحقل نصي اسمه person ويحمل required. اختبرناه مرة فارغا ومرة بالقيمة التجريبية Noura. لم نضع novalidate أو formnovalidate، ولم نستخدم عنصرا اسمه submit. أبقينا هذه الشروط ثابتة طوال المقارنة.
خصصنا عدادا لحدث invalid وآخر لحدث submit. وسجل معالج submit الحدث ثم استدعى preventDefault() لإلغاء الإجراء الافتراضي؛ وجود الحدث في سجلنا لا يعني أننا سمحنا بالإرسال. [3]
شغلنا الحالات الأربع في Edge 155.0.4283.45. وجهنا وجهة التجربة إلى إطار نتائج، واعترضت أداة الاختبار كل طلب قبل الشبكة وأعادته بصفحة محلية. بذلك استطعنا عد محاولة التنقل المباشر دون إرسال الاسم التجريبي إلى موقع خارجي.
اقرأ ثلاثة أعداد لكل حالة
مع requestSubmit والحقل الفارغ سجلنا invalid مرة واحدة، وsubmit صفرا، ولم تظهر محاولة تنقل. بعد وضع Noura في نموذج جديد، سجلنا invalid صفرا وsubmit مرة واحدة. ظل التنقل صفرا أيضا؛ هذه المرة وصل التنفيذ إلى المعالج الذي ألغى الإجراء.
مع submit المباشرة كانت النتيجة مختلفة: صفر لحدث invalid وصفر لحدث submit، مع محاولة تنقل واحدة اعترضناها محليا. تكررت هذه الثلاثية سواء أكان الحقل فارغا أم حمل Noura. لم يظهر في سجل المعالج شيء يمكنه إلغاء هاتين المحاولتين.
الصفر في عمود الحدث لا يصف سببا واحدا. في حالة requestSubmit الفارغة رأينا حدث invalid، بينما لم نره في حالتي الاستدعاء المباشر. لذلك احتفظنا بالأعداد الثلاثة مع اسم الطريقة وقيمة الحقل، بدلا من اختزال النتيجة في «عمل النموذج» أو «لم يعمل».
تجربة قصيرة تلغي الإرسال داخل الصفحة
المثال الآتي ينفذ requestSubmit مرتين فقط في صفحة اختبار فارغة. يبقي معالج الإلغاء، ثم يزيل النموذج بعد قراءة السجل. لا تستبدل الاستدعاء فيه بـ submit()؛ اختبارنا المباشر استخدم اعتراضا محليا منفصلا. [1] [2] [3]
نفذنا الشيفرة نفسها. طبعت أولا ["invalid"]، ثم ["invalid","submit"]. المصفوفة تراكمية هنا، لذلك بقي اسم الحدث الأول في القراءة الثانية. أخذنا نسخة عند كل طباعة، ولم نعد هذه النتيجة صفين مستقلين من مصفوفة الحالات الأربع.
لاحظ الفرق بين شكلَي السجل: المصفوفة القصيرة تحفظ ترتيب جولتين على نموذج واحد، أما الرسم السابق فيعرض عدادات نماذج جديدة. الخلط بينهما قد يجعلك تنسب الحدث الأول إلى القيمة الممتلئة، مع أنه وقع قبل تعيين Noura.
const form =
document.createElement("form");
form.innerHTML =
'<label>Test name' +
'<input name="person" required>' +
'</label>';
const events=[];
form.addEventListener("invalid",
()=>events.push("invalid"),true);
form.addEventListener("submit",e=>{
events.push("submit");
e.preventDefault();
});
document.body.append(form);
form.requestSubmit();
console.log([...events]);
form.elements.person.value="Noura";
form.requestSubmit();
console.log([...events]);
form.remove();طابق الاستدعاء مع المعالج
يمر requestSubmit بالتحقق قبل متابعة المسار؛ إذا لم يجتزه النموذج لا يكتمل الإرسال. في المقابل، لا تستدعي submit المباشرة معالج حدث submit. لهذا لا تتعامل مع الاسمين كبديلين متكافئين. [1] [2]
في مثالنا كان الهدف رؤية الموضع الذي وصل إليه التنفيذ. إذا كان سجل submit خاليا، نرجع أولا إلى اسم الطريقة ثم إلى سجل invalid. وإذا ظهر submit، نراجع فعل المعالج نفسه؛ معالجنا يسجل ويلغي، ولا يرسل طلبا إضافيا.
لم نقس استلام خادم أو تخزين بيانات أو نجاح عملية تسجيل. كما لم نختبر زر إرسال يبدل إعدادات النموذج. النتيجة المحددة هنا هي اختلاف مسارين برمجيين تحت شروط معلنة؛ احتفظ بهذه الشروط بجانب أي أرقام تنقلها من التجربة.
المراجع
أُعدّ هذا المقال بمساعدة الذكاء الاصطناعي وراجعته أدوات ذكاء اصطناعي. لا يُنسب إلى مراجع بشري أو خبير مستقل. منهجية المحتوى.