เกิดข้อผิดพลาดในการซ่อนอินพุตเมื่อส่งแบบฟอร์ม
คำอธิบายปัญหา เมื่อส่งแบบฟอร์ม แท็กอินพุตบางส่วนจะถูกซ่อน และข้อผิดพลาด An invalid form control with name='' is not focusable จะปรากฏขึ้นในระหว่างกระบวนการตรวจสอบแบบฟอร์ม
แม้ว่าปัญหาที่ฉันพบคือแท็กอินพุตของฉันไม่มีแอตทริบิวต์ที่จำเป็นเลย แต่ก่อนที่แท็กจะถูกซ่อน (ฉันใช้แถบแท็บเพื่อสลับ) ฉันป้อนรูปแบบผิดแล้วซ่อนไว้ ในเวลานี้มันผิดจริง ๆ นอกจากนี้ยังจะได้รับการยืนยันโดยแบบฟอร์ม แต่เนื่องจากถูกซ่อนอยู่ เบราว์เซอร์จะรายงานข้อผิดพลาดหากไม่สามารถรับโฟกัสได้
สารละลายเพียงตั้งค่าของอินพุตให้ว่างเปล่าก่อนที่จะซ่อนอินพุตของฉันไม่ได้ใช้แอตทริบิวต์ที่จำเป็น
ข้อผิดพลาดนี้จะเกิดขึ้นหากอินพุตมี display:none และแอตทริบิวต์ที่จำเป็น
สาเหตุChrome ต้องการเน้นไปที่ส่วนควบคุมที่จำเป็นแต่ยังคงว่างเปล่าเพื่อให้สามารถแสดงข้อความได้ โปรดกรอกข้อมูลในช่องนี้ อย่างไรก็ตาม หากตัวควบคุมถูกซ่อนไว้เมื่อ Chrome ต้องการแสดงข้อความ เช่น เมื่อส่งแบบฟอร์มแล้ว Chrome จะไม่สามารถมุ่งเน้นที่ตัวควบคุมได้เนื่องจากถูกซ่อนอยู่ ดังนั้นจึงไม่สามารถส่งแบบฟอร์มได้
วิธีแก้ไขมีดังนี้1. เมื่อซ่อน ให้ลบแอตทริบิวต์ที่จำเป็นออก
selector.removeAttribute (จำเป็น)
2. หากไม่ได้ใช้ อาจเกิดจากการไม่ได้ตั้งค่าประเภทปุ่ม ตั้งค่า <button type=button>
3. แบบฟอร์มไม่ได้รับการยืนยัน นั่นคือ มีการเพิ่มแอตทริบิวต์ novalidate (ไม่ใช่วิธีแก้ปัญหาขั้นสุดท้าย ）<form novalidate></form>
4. เนื่องจากเกิดจากการใช้ display:none การมองเห็นแบบเดียวกัน: ซ่อนไว้ก็จะทำให้เกิดปัญหาเช่นกัน ดังนั้นอย่าใช้มัน คุณสามารถตั้งค่าความทึบของสไตล์ CSS: 0;
5. ปิดใช้งานการควบคุมแบบฟอร์มนี้ ปิดการใช้งาน นี่เป็นเพราะโดยปกติแล้วถ้าคุณซ่อนตัวควบคุมฟอร์ม นั่นเป็นเพราะคุณไม่สนใจคุณค่าของมัน ดังนั้นคู่ค่าชื่อตัวควบคุมแบบฟอร์มนี้จะไม่ถูกส่งเมื่อมีการส่งแบบฟอร์ม
$(body).on(submit, .myForm, function(evt) {// ปิดการใช้งานสิ่งที่เราไม่ต้องการตรวจสอบ.$([input:hidden, textarea:hidden, select:hidden]).attr(disabled , จริง);// หากมีการตรวจสอบ 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!