خطأ في إخفاء الإدخال عند إرسال النموذج
وصف المشكلة عند إرسال النموذج، تكون بعض علامات الإدخال مخفية، وسيظهر الخطأ An invalid form control with name='' is not focusable أثناء عملية التحقق من النموذج.
على الرغم من أن المشكلة التي واجهتها هي أن علامة الإدخال الخاصة بي لا تحتوي على سمة مطلوبة على الإطلاق، ولكن قبل إخفاء العلامة (استخدمت شريط علامات التبويب للتبديل) أدخلت تنسيقًا خاطئًا ثم أخفيته، في هذا الوقت كان الأمر خاطئًا بالفعل. سيتم التحقق منه أيضًا من خلال النموذج، ولكن نظرًا لأنه مخفي، فسيقوم المتصفح بالإبلاغ عن خطأ إذا لم يتمكن من التركيز.
حلما عليك سوى تعيين قيمة الإدخال على أنها فارغة قبل إخفائها. لا يستخدم الإدخال الخاص بي السمة المطلوبة.
سيحدث هذا الخطأ أيضًا إذا كان الإدخال يحتوي على العرض: لا شيء والسمات المطلوبة.
سببيريد Chrome التركيز على عناصر التحكم المطلوبة ولكنها لا تزال فارغة حتى يتمكن من ظهور الرسالة الرجاء ملء هذا الحقل. ومع ذلك، إذا كان عنصر التحكم مخفيًا عندما يريد Chrome ظهور الرسالة، أي عند إرسال النموذج، فلن يتمكن Chrome من التركيز على عنصر التحكم لأنه مخفي، وبالتالي لا يتم إرسال النموذج.
الحل هو كما يلي1. عند الاختباء، احذف السمة المطلوبة
Selector.removeAttribute(مطلوب)
2. إذا لم يتم استخدام المطلوب، فقد يكون السبب هو عدم ضبط نوع الزر. اضبط <button type=button>
3. لم يتم التحقق من النموذج، أي تمت إضافة سمة novalidate. (ليس الحل النهائي ）<form novalidate></form>
4. نظرًا لأنه ناتج عن استخدام العرض: لا شيء، فإن نفس الرؤية: مخفية ستتسبب أيضًا في حدوث مشكلات، لذا لا تستخدمها. يمكنك ضبط عتامة نمط CSS: 0;
5. قم بتعطيل عنصر التحكم في النموذج هذا. معطل هذا لأنه عادةً إذا قمت بإخفاء عنصر تحكم نموذج، فذلك يعني أنك لا تهتم بقيمته. لذلك لن يتم إرسال زوج قيمة اسم عنصر تحكم النموذج هذا عند إرسال النموذج.
$(body).on(submit, .myForm, function(evt) {// تعطيل الأشياء التي لا نريد التحقق من صحتها.$([input:hidden, textarea:hidden, Select:hidden]).attr(disabled , true);// إذا كان التحقق من صحة HTML5 متاحًا، فاسمح بتشغيله. وإلا فامنع default.if (this.el.checkValidity && !this.el.checkValidity()) { // إعادة تمكين الأشياء التي قمنا بتعطيلها سابقًا $([input:hidden, textarea:hidden, Select:hidden]).attr(disabled, false); return true;}evt.preventDefault();// إعادة تمكين الأشياء التي لقد قمنا بتعطيلها سابقًا.$([input:hidden, textarea:hidden, Select:hidden]).attr(disabled, false);// أيًا كانت عناصر معالجة النماذج الأخرى توضع هنا.}); تلخيصما ورد أعلاه هو المشكلات والحلول التي تمت مواجهتها في استخدام الإدخال المطلوب لـ h5 الذي قدمه المحرر، وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب . أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!