การควบคุมฟอร์มที่ไม่ถูกต้องพร้อมชื่อ = '' ไม่สามารถโฟกัสได้

ฉันมีปัญหาเฉียบพลันบนเว็บไซต์ของฉัน ใน Google Chrome ลูกค้าบางคนไม่สามารถไปยังหน้าการชำระเงินของฉันได้ เมื่อพยายามส่งแบบฟอร์มฉันได้รับข้อผิดพลาดนี้:

An invalid form control with name='' is not focusable.

นี่คือจากคอนโซล JavaScript

ฉันอ่านว่าปัญหาอาจเกิดจากเขตข้อมูลที่ซ่อนอยู่ซึ่งมีแอตทริบิวต์ที่จำเป็น ตอนนี้ปัญหาคือเรากำลังใช้. net webforms ต้องการตัวตรวจสอบความถูกต้องของฟิลด์และไม่ใช่แอตทริบิวต์ที่จำเป็นสำหรับ html5

ดูเหมือนว่าสุ่มที่ได้รับข้อผิดพลาดนี้ มีใครบ้างที่รู้วิธีแก้ปัญหานี้?

ปัญหานี้เกิดขึ้นกับ Chrome ถ้าเขตข้อมูลฟอร์มไม่ผ่านการตรวจสอบ แต่เนื่องจากการควบคุมที่ไม่ถูกต้องนั้นไม่สามารถโฟกัสได้ความพยายามของเบราว์เซอร์ในการแสดงข้อความ "กรุณากรอกฟิลด์นี้"ถัดไปล้มเหลวเช่นกัน

การควบคุมแบบฟอร์มอาจไม่สามารถโฟกัสได้ในเวลาที่การตรวจสอบความถูกต้องถูกเรียกด้วยเหตุผลหลายประการ สองสถานการณ์ที่อธิบายไว้ด้านล่างเป็นสาเหตุที่สำคัญที่สุด:

• ฟิลด์ไม่เกี่ยวข้องตามบริบทปัจจุบันของตรรกะทางธุรกิจ ในสถานการณ์เช่นนี้การควบคุมที่เกี่ยวข้องควรถูกลบออกจาก DOM หรือไม่ควรทำเครื่องหมายด้วยrequiredแอตทริบิวต์ ณ จุดนั้น

• การตรวจสอบก่อนกำหนดอาจเกิดขึ้นเนื่องจากผู้ใช้กดปุ่มENTERบนอินพุต หรือผู้ใช้คลิกที่ปุ่ม / อินพุตควบคุมในรูปแบบที่ไม่ได้กำหนดtypeคุณสมบัติของการควบคุมอย่างถูกต้อง หากไม่ได้ตั้งค่าแอตทริบิวต์ประเภทของปุ่มไว้buttonChrome (หรือเบราว์เซอร์อื่น ๆ สำหรับเรื่องนั้น) จะทำการตรวจสอบความถูกต้องทุกครั้งที่มีการคลิกปุ่มเพราะsubmitเป็นค่าเริ่มต้นของtypeแอตทริบิวต์ของปุ่ม

  ในการแก้ปัญหาหากคุณมีปุ่มบนหน้าเว็บที่ทำสิ่งอื่นนอกเหนือจากการส่งหรือรีเซ็ตโปรดอย่าลืมทำสิ่งนี้<button type="button">เสมอ:

โปรดดูhttps://stackoverflow.com/a/7264966/1356062

การเพิ่มnovalidateคุณสมบัติให้กับฟอร์มจะช่วยให้:

<form name="myform" novalidate>

ในของformคุณคุณอาจinputมีrequiredแอตทริบิวต์ที่ซ่อนอยู่:

• <input type="hidden" required />
• <input type="file" required style="display: none;"/>

formไม่สามารถมุ่งเน้นไปที่องค์ประกอบเหล่านั้นคุณจะต้องลบrequiredจากปัจจัยการผลิตที่ซ่อนอยู่ทั้งหมดหรือใช้ฟังก์ชั่นการตรวจสอบในจาวาสคริปต์ที่จะจัดการกับพวกเขาหากคุณจำเป็นต้องใช้จริงๆการป้อนข้อมูลที่ซ่อนอยู่

ในกรณีที่คนอื่นมีปัญหานี้ฉันพบสิ่งเดียวกัน ดังที่กล่าวไว้ในความคิดเห็นเป็นเพราะเบราว์เซอร์พยายามตรวจสอบความถูกต้องของเขตข้อมูลที่ซ่อนอยู่ มันกำลังค้นหาช่องว่างในแบบฟอร์มและพยายามที่จะมุ่งเน้นไปที่พวกเขา แต่เพราะพวกเขาถูกตั้งค่าเป็นdisplay:none;จึงไม่สามารถทำได้ ดังนั้นข้อผิดพลาด

ฉันสามารถแก้ไขได้โดยใช้สิ่งที่คล้ายกับสิ่งนี้:

$("body").on("submit", ".myForm", function(evt) {

    // Disable things that we don't want to validate.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);

    // If HTML5 Validation is available let it run. Otherwise prevent default.
    if (this.el.checkValidity && !this.el.checkValidity()) {
        // Re-enable things that we previously disabled.
        $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
        return true;
    }
    evt.preventDefault();

    // Re-enable things that we previously disabled.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);

    // Whatever other form processing stuff goes here.
});

นอกจากนี้อาจเป็น"การควบคุมรูปแบบไม่ถูกต้อง"ซ้ำใน Google Chrome เท่านั้น

ในกรณีของฉันมีปัญหากับการinput type="radio" requiredถูกซ่อนอยู่กับ:

visibility: hidden;

ข้อความแสดงข้อผิดพลาดนี้จะแสดงว่าประเภทอินพุตที่ต้องการradioหรือcheckboxมีdisplay: none;คุณสมบัติ CSS

หากคุณต้องการสร้างอินพุต / ช่องทำเครื่องหมายวิทยุที่กำหนดเองที่พวกเขาจะต้องซ่อนจาก UIและยังคงrequiredคุณลักษณะคุณควรใช้:

opacity: 0; คุณสมบัติ CSS

ไม่มีคำตอบก่อนหน้านี้ที่ใช้ได้สำหรับฉันและฉันไม่มีฟิลด์ที่ซ่อนอยู่กับrequiredแอตทริบิวต์

ในกรณีของฉันปัญหาเกิดจากการมี a <form>และ a <fieldset>เป็นลูกคนแรกของมันซึ่ง<input>มีrequiredคุณลักษณะ การลบการ<fieldset>แก้ไขปัญหา หรือคุณสามารถห่อแบบฟอร์มด้วย อนุญาตโดย HTML5

ฉันใช้ Windows 7 x64, Chrome เวอร์ชัน 43.0.2357.130 m

ความเป็นไปได้อีกอย่างหนึ่งถ้าคุณได้รับข้อผิดพลาดในอินพุตของช่องทำเครื่องหมาย หากช่องทำเครื่องหมายของคุณใช้ CSS ที่กำหนดเองซึ่งซ่อนค่าเริ่มต้นและแทนที่ด้วยสไตล์อื่น ๆ สิ่งนี้จะทำให้เกิดข้อผิดพลาดที่ไม่สามารถโฟกัสได้ใน Chrome เมื่อเกิดข้อผิดพลาดในการตรวจสอบ

ฉันพบสิ่งนี้ในสไตล์ชีทของฉัน:

input[type="checkbox"] {
    visibility: hidden;
}

การแก้ไขอย่างง่ายคือการแทนที่ด้วยสิ่งนี้:

input[type="checkbox"] {
    opacity: 0;
}

เป็นไปได้ว่าคุณซ่อนฟิลด์ (display: none) ด้วยฟิลด์ที่จำเป็นแอตทริบิวต์ที่

โปรดตรวจสอบฟิลด์ที่จำเป็นทั้งหมดจะปรากฏแก่ผู้ใช้ :)

สำหรับฉันสิ่งนี้เกิดขึ้นเมื่อมี<select>ช่องที่มีตัวเลือกที่เลือกไว้ล่วงหน้าพร้อมค่า '':

<select name="foo" required="required">
    <option value="" selected="selected">Select something</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

น่าเสียดายที่เป็นโซลูชันข้ามเบราว์เซอร์เดียวสำหรับตัวยึดตำแหน่ง ( ฉันจะสร้างตัวยึดตำแหน่งสำหรับกล่อง 'เลือก' ได้อย่างไร )

ปัญหาเกิดขึ้นกับ Chrome 43.0.2357.124

หากคุณมีฟิลด์ใด ๆ ที่มีแอตทริบิวต์ที่จำเป็นซึ่งไม่สามารถมองเห็นได้ในระหว่างการส่งแบบฟอร์มข้อผิดพลาดนี้จะถูกโยนทิ้ง คุณเพิ่งลบแอททริบิวที่ต้องการเมื่อพยายามซ่อนฟิลด์นั้น คุณสามารถเพิ่มแอททริบิวที่ต้องการในกรณีที่คุณต้องการแสดงฟิลด์อีกครั้ง ด้วยวิธีนี้การตรวจสอบของคุณจะไม่ถูกบุกรุกและในเวลาเดียวกันข้อผิดพลาดจะไม่ถูกโยนทิ้ง

สำหรับปัญหา Select2 Jquery

ปัญหาเกิดจากการตรวจสอบ HTML5 ไม่สามารถมุ่งเน้นองค์ประกอบที่ไม่ถูกต้องที่ซ่อนอยู่ ฉันเจอปัญหานี้เมื่อฉันจัดการกับปลั๊กอิน jQuery Select2

วิธีแก้ไข คุณสามารถฉีดผู้ฟังเหตุการณ์และเหตุการณ์ 'ไม่ถูกต้อง' ขององค์ประกอบทั้งหมดของฟอร์มเพื่อให้คุณสามารถจัดการก่อนเหตุการณ์ HTML5 จะตรวจสอบ

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});

มันจะแสดงข้อความนั้นถ้าคุณมีรหัสเช่นนี้:

<form>
  <div style="display: none;">
    <input name="test" type="text" required/>
  </div>

  <input type="submit"/>
</form>

ใช่ .. หากการควบคุมรูปแบบที่ซ่อนอยู่นั้นจำเป็นต้องมีเขตข้อมูลก็จะแสดงข้อผิดพลาด ทางออกหนึ่งคือปิดใช้งานการควบคุมฟอร์มนี้ นี่เป็นเพราะโดยปกติถ้าคุณซ่อนการควบคุมฟอร์มมันเป็นเพราะคุณไม่ได้เกี่ยวข้องกับคุณค่าของมัน ดังนั้นค่าชื่อการควบคุมแบบฟอร์มนี้จะไม่ถูกส่งไปในขณะที่ส่งแบบฟอร์ม

คุณอาจลอง .removeAttribute("required")ใช้องค์ประกอบเหล่านั้นซึ่งซ่อนอยู่ในช่วงเวลาที่โหลดหน้าต่าง เนื่องจากมีความเป็นไปได้ค่อนข้างมากที่องค์ประกอบที่เป็นปัญหาจะถูกซ่อนเนื่องจากจาวาสคริปต์ (แบบฟอร์มแบบแท็บ)

เช่น

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

สิ่งนี้ควรทำงาน

มันใช้งานได้สำหรับฉัน ... ไชโย

สาเหตุอื่นที่อาจเป็นไปได้และไม่ครอบคลุมในคำตอบก่อนหน้าทั้งหมดเมื่อคุณมีแบบฟอร์มปกติที่มีฟิลด์ที่จำเป็นและคุณส่งแบบฟอร์มแล้วซ่อนแบบฟอร์มโดยตรงหลังจากส่ง (ด้วย javascript) ซึ่งไม่มีเวลาสำหรับฟังก์ชันการตรวจสอบความถูกต้อง

ฟังก์ชันการตรวจสอบความถูกต้องจะพยายามมุ่งเน้นไปที่ฟิลด์ที่ต้องการและแสดงข้อความการตรวจสอบข้อผิดพลาด แต่ฟิลด์นั้นถูกซ่อนอยู่แล้วดังนั้น "การควบคุมแบบฟอร์มที่ไม่ถูกต้องด้วยชื่อ = '' ไม่สามารถโฟกัสได้ ปรากฏ!

แก้ไข:

ในการจัดการกรณีนี้เพียงเพิ่มเงื่อนไขต่อไปนี้ในตัวจัดการการส่งของคุณ

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

แก้ไข: คำอธิบาย

หากว่าคุณซ่อนฟอร์มในการส่งรหัสนี้รับประกันว่าฟอร์ม / ฟิลด์จะไม่ถูกซ่อนจนกว่าฟอร์มจะใช้ได้ ดังนั้นหากฟิลด์ไม่ถูกต้องเบราว์เซอร์สามารถมุ่งเน้นไปที่มันได้โดยไม่มีปัญหาเนื่องจากฟิลด์นี้ยังคงแสดงอยู่

มีบางสิ่งที่ยังทำให้ฉันประหลาดใจ ... ฉันมีแบบฟอร์มที่มีพฤติกรรมแบบไดนามิกสำหรับเอนทิตีที่แตกต่างกันสองรายการ เอนทิตีหนึ่งต้องการบางฟิลด์ที่ฟิลด์อื่นไม่ต้องการ ดังนั้นรหัส JS ของฉันขึ้นอยู่กับเอนทิตีทำบางสิ่งเช่น: $ ('# periodo'). removeAttr ('ต้อง'); $ ( "# periodo ภาชนะ") ซ่อน ().

และเมื่อผู้ใช้เลือกเอนทิตีอื่น ๆ : $ ("# periodo-container") show (); $ ('# periodo'). prop ('ต้องใช้', จริง);

แต่บางครั้งเมื่อส่งแบบฟอร์มปัญหาจะปรากฏขึ้น: "การควบคุมแบบฟอร์มที่ไม่ถูกต้องพร้อมชื่อ = periodo '' ไม่สามารถโฟกัสได้ (ฉันกำลังใช้ค่าเดียวกันสำหรับรหัสและชื่อ)

ในการแก้ไขปัญหานี้คุณต้องมั่นใจว่าข้อมูลที่คุณตั้งค่าหรือนำออก 'ที่จำเป็น' นั้นสามารถมองเห็นได้เสมอ

ดังนั้นสิ่งที่ฉันทำคือ:

$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required'); 
$("#periodo-container").hide(); //then hide

นั่นเป็นวิธีการแก้ปัญหาของฉัน ... ไม่น่าเชื่อ

ในกรณีของฉัน ..

ng-showกำลังถูกใช้งาน
ng-ifถูกวางไว้ในสถานที่และแก้ไขข้อผิดพลาดของฉัน

สำหรับการใช้งานเชิงมุม:

NG-ต้อง = "บูล"

นี่จะใช้แอตทริบิวต์ html5 'ที่จำเป็น' เท่านั้นหากค่าเป็นจริง

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />

ฉันมาที่นี่เพื่อตอบว่าฉันได้สั่งให้ปัญหานี้เกิดขึ้นโดยไม่ได้ปิดตัวลง </form>แท็กและมีหลายรูปแบบในหน้าเดียวกัน ฟอร์มแรกจะขยายรวมถึงการค้นหาการตรวจสอบความถูกต้องของอินพุตฟอร์มจากที่อื่น เนื่องจากรูปแบบเหล่านี้ถูกซ่อนไว้จึงทำให้เกิดข้อผิดพลาด

ตัวอย่างเช่น:

<form method="POST" name='register' action="#handler">


<input type="email" name="email"/>
<input type="text" name="message" />
<input type="date" name="date" />

<form method="POST" name='register' action="#register">
<input type="text" name="userId" />
<input type="password" name="password" />
<input type="password" name="confirm" />

</form>

ทริกเกอร์

การควบคุมฟอร์มที่ไม่ถูกต้องพร้อมชื่อ = 'userId' ไม่สามารถโฟกัสได้

การควบคุมฟอร์มที่ไม่ถูกต้องพร้อมชื่อ = 'รหัสผ่าน' ไม่สามารถโฟกัสได้

การควบคุมฟอร์มที่ไม่ถูกต้องพร้อมชื่อ = 'ยืนยัน' ไม่สามารถโฟกัสได้

มีหลายวิธีในการแก้ไขปัญหานี้

1. เพิ่ม novalidate ให้กับฟอร์มของคุณ แต่ผิดทั้งหมดเนื่องจากจะลบการตรวจสอบแบบฟอร์มซึ่งจะนำไปสู่ข้อมูลที่ไม่ถูกต้องที่ป้อนโดยผู้ใช้

<form action="...." class="payment-details" method="post" novalidate>

2. การใช้สามารถลบแอตทริบิวต์ที่ต้องการออกจากช่องที่ต้องการซึ่งเป็นสิ่งผิดเพราะจะลบการตรวจสอบแบบฟอร์มอีกครั้ง

   แทนสิ่งนี้:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" required="required">

   Use this:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">

3. ใช้สามารถปิดการใช้งานเขตข้อมูลที่จำเป็นเมื่อคุณจะไม่ส่งแบบฟอร์มแทนการใช้ตัวเลือกอื่น นี่คือทางออกที่แนะนำในความคิดของฉัน

   ชอบ:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">

หรือปิดการใช้งานผ่านรหัส javascript / jquery ขึ้นอยู่กับสถานการณ์ของคุณ

ฉันพบปัญหาเดียวกันเมื่อใช้ Angular JS มันมีสาเหตุมาจากการใช้ที่จำเป็นร่วมกับng ซ่อน เมื่อฉันคลิกที่ปุ่มส่งในขณะที่องค์ประกอบนี้ถูกซ่อนอยู่มันก็เกิดข้อผิดพลาดการควบคุมแบบฟอร์มที่ไม่ถูกต้องพร้อมชื่อ = '' ไม่สามารถโฟกัสได้ในที่สุด!

ตัวอย่างของการใช้ ng-hide พร้อมกับจำเป็น:

<input type="text" ng-hide="for some condition" required something >

ฉันแก้ไขมันโดยแทนที่สิ่งที่ต้องการด้วย ng-pattern แทน

ตัวอย่างของการแก้ปัญหา:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >

สำหรับผู้ใช้ AngularJS 1.x รายอื่นข้อผิดพลาดนี้ปรากฏขึ้นเนื่องจากฉันซ่อนตัวควบคุมฟอร์มไม่ให้แสดงแทนการลบออกจาก DOM ทั้งหมดเมื่อฉันไม่ต้องการให้การควบคุมเสร็จสมบูรณ์

ฉันแก้ไขสิ่งนี้โดยใช้ng-ifแทนng-show/ng-hideบน div ที่มีการควบคุมฟอร์มที่ต้องการการตรวจสอบ

หวังว่านี้จะช่วยให้คุณผู้ใช้กรณีเพื่อนขอบ

ให้ฉันระบุกรณีของฉันเพราะมันแตกต่างจากการแก้ปัญหาทั้งหมดข้างต้น ฉันมีแท็ก html ที่ปิดไม่ถูกต้อง องค์ประกอบก็ไม่ได้ requiredแต่มันก็ถูกฝังอยู่ในhiddendiv

ปัญหาในกรณีของฉันคือกับtype="datetime-local"- ซึ่งเป็นเหตุผลบางอย่าง - ถูกตรวจสอบที่ส่งแบบฟอร์ม

ฉันเปลี่ยนสิ่งนี้

<input type="datetime-local" />

เข้าไปในนั้น

<input type="text" />

ฉันต้องการที่จะตอบที่นี่เพราะไม่มีคำตอบเหล่านี้หรือผลลัพธ์อื่น ๆ ของ Google สามารถแก้ไขปัญหาให้ฉันได้

สำหรับฉันมันไม่มีส่วนเกี่ยวข้องกับ fieldets หรืออินพุตที่ซ่อนอยู่

ฉันพบว่าถ้าฉันใช้max="5"(เช่น) มันจะทำให้เกิดข้อผิดพลาดนี้ ถ้าฉันใช้maxlength="5" ... ไม่มีข้อผิดพลาด

ฉันสามารถทำซ้ำข้อผิดพลาดและล้างข้อผิดพลาดหลายครั้ง

ผมก็ยังไม่ทราบว่าทำไมใช้รหัสที่ก่อให้เกิดข้อผิดพลาดเท่านี้รัฐก็ควรจะถูกต้องได้โดยไม่ต้องเป็น "นาที" ผมเชื่อว่า

อีกทางเลือกหนึ่งและคำตอบที่เข้าใจผิดได้คือการใช้คุณลักษณะตัวยึดตำแหน่ง HTML5 จากนั้นไม่จำเป็นต้องใช้การตรวจสอบ js ใด ๆ

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

Chrome จะไม่สามารถค้นหาองค์ประกอบที่ว่างเปล่าซ่อนเร้นและจำเป็นต้องให้ความสนใจ ทางออกที่ง่าย

หวังว่าจะช่วย ฉันเรียงลำดับทั้งหมดด้วยวิธีนี้

ฉันมาที่นี่พร้อมกับปัญหาเดียวกัน สำหรับฉัน (การฉีดองค์ประกอบที่ซ่อนอยู่ตามความจำเป็น - เช่นการศึกษาในแอปงาน) มีค่าสถานะที่ต้องการ

สิ่งที่ฉันรู้คือตัวตรวจสอบความถูกต้องใช้การฉีดเร็วกว่าเอกสารพร้อมจึงบ่น

แท็ก ng ที่ต้องการดั้งเดิมของฉันใช้แท็กการมองเห็น (vm.flags.hasHighSchool)

ฉันแก้ไขด้วยการสร้างการตั้งค่าสถานะเฉพาะเพื่อตั้งค่าที่จำเป็น ng-required = "vm.flags.highSchoolRequired == true"

ฉันเพิ่มการโทรกลับ 10ms ในการตั้งค่าสถานะนั้นและปัญหาได้รับการแก้ไข

 vm.hasHighSchool = function (attended) {

        vm.flags.hasHighSchool = attended;
        applicationSvc.hasHighSchool(attended, vm.application);
        setTimeout(function () {
            vm.flags.highSchoolRequired = true;;
        }, 10);
    }

Html:

<input type="text" name="vm.application.highSchool.name" data-ng-model="vm.application.highSchool.name" class="form-control" placeholder="Name *" ng-required="vm.flags.highSchoolRequired == true" /></div>

ตรวจสอบให้แน่ใจว่าตัวควบคุมทั้งหมดในแบบฟอร์มของคุณพร้อมแอตทริบิวต์ที่จำเป็นต้องมีชุดชื่อแอตทริบิวต์ด้วย

ข้อผิดพลาดนี้เกิดขึ้นกับฉันเพราะฉันกำลังส่งแบบฟอร์มที่มีฟิลด์บังคับที่ยังไม่ได้กรอก

ข้อผิดพลาดเกิดขึ้นเนื่องจากเบราว์เซอร์พยายามมุ่งเน้นไปที่ฟิลด์ที่จำเป็นเพื่อเตือนผู้ใช้ว่าจำเป็นต้องใช้ฟิลด์ใด แต่ฟิลด์ที่ต้องการนั้นถูกซ่อนอยู่ในจอแสดงผลไม่มี div ดังนั้นเบราว์เซอร์ไม่สามารถโฟกัสได้ ฉันกำลังส่งจากแท็บที่มองเห็นได้และฟิลด์ที่ต้องการอยู่ในแท็บที่ซ่อนอยู่ดังนั้นจึงเกิดข้อผิดพลาด

ในการแก้ไขตรวจสอบให้แน่ใจว่าคุณได้กรอกฟิลด์ที่จำเป็นครบถ้วนแล้ว

มันเป็นเพราะมีการป้อนข้อมูลที่ซ่อนอยู่กับคุณลักษณะที่จำเป็นในรูปแบบ

ในกรณีของฉันฉันมีกล่องที่เลือกและมันถูกซ่อนไว้โดย jquery tokenizer โดยใช้รูปแบบอินไลน์ หากฉันไม่ได้เลือกโทเค็นใด ๆ เบราว์เซอร์จะโยนข้อผิดพลาดด้านบนในการส่งแบบฟอร์ม

ดังนั้นฉันแก้ไขโดยใช้เทคนิค css ด้านล่าง:

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }

ฉันได้รับข้อผิดพลาดเดียวกันเมื่อโคลนองค์ประกอบ HTML เพื่อใช้ในแบบฟอร์ม

(ฉันมีรูปแบบที่สมบูรณ์บางส่วนซึ่งมีเทมเพลตแทรกเข้าไปแล้วเทมเพลตจะถูกแก้ไข)

ข้อผิดพลาดคือการอ้างอิงถึงเขตข้อมูลดั้งเดิมและไม่ใช่รุ่นที่โคลน

ฉันไม่พบวิธีการใด ๆ ที่จะบังคับให้แบบฟอร์มประเมินตัวเองใหม่อีกครั้ง (ด้วยความหวังว่ามันจะกำจัดการอ้างอิงใด ๆ ไปยังเขตข้อมูลเก่าที่ตอนนี้ไม่มีอยู่) ก่อนเริ่มการตรวจสอบความถูกต้อง

เพื่อแก้ไขปัญหานี้ฉันได้ลบแอททริบิวที่ต้องการออกจากองค์ประกอบดั้งเดิมและเพิ่มมันแบบไดนามิกในฟิลด์โคลนก่อนที่จะฉีดเข้าไปในแบบฟอร์ม ตอนนี้แบบฟอร์มตรวจสอบความถูกต้องของเขตข้อมูลที่ถูกโคลนและปรับเปลี่ยนอย่างถูกต้อง