Điều khiển biểu mẫu không hợp lệ với name = '' không thể tập trung

Tôi có một vấn đề cấp tính trên trang web của tôi. Trong Google Chrome, một số khách hàng không thể tiếp tục đến trang thanh toán của tôi. Khi cố gắng gửi một biểu mẫu, tôi nhận được lỗi này:

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

Đây là từ bảng điều khiển JavaScript.

Tôi đọc rằng vấn đề có thể là do các trường ẩn có thuộc tính bắt buộc. Bây giờ vấn đề là chúng tôi đang sử dụng các trình xác thực trường bắt buộc .net, chứ không phải thuộc tính bắt buộc html5.

Có vẻ ngẫu nhiên ai bị lỗi này. Có ai biết một giải pháp cho việc này?

Sự cố này xảy ra trên Chrome nếu trường biểu mẫu không xác thực, nhưng do điều khiển không hợp lệ tương ứng không thể tập trung được, cố gắng hiển thị thông báo "Vui lòng điền vào trường này" bên cạnh trường .

Một điều khiển biểu mẫu có thể không thể tập trung tại thời điểm xác thực được kích hoạt vì một số lý do. Hai kịch bản được mô tả dưới đây là những nguyên nhân nổi bật nhất:

• Lĩnh vực này không liên quan theo bối cảnh hiện tại của logic kinh doanh. Trong kịch bản như vậy, điều khiển tương ứng phải được loại bỏ khỏi DOM hoặc không nên đánh dấu nó bằng requiredthuộc tính tại thời điểm đó.

• Xác thực sớm có thể xảy ra do người dùng nhấn phím ENTER trên đầu vào. Hoặc người dùng nhấp vào nút / điều khiển đầu vào ở dạng chưa xác định chính xác typethuộc tính của điều khiển. Nếu thuộc tính loại của nút không được đặt thành button, Chrome (hoặc bất kỳ trình duyệt nào khác cho vấn đề đó) sẽ thực hiện xác thực mỗi lần nhấp vào nút vì đó submitlà giá trị mặc định của typethuộc tính của nút .

  Để giải quyết vấn đề, nếu bạn có một nút trên trang của mình thực hiện một thao tác nào khác ngoài gửi hoặc đặt lại , hãy luôn nhớ thực hiện việc này : <button type="button">.

Xem thêm https://stackoverflow.com/a/7264966/1356062

Thêm một novalidatethuộc tính vào biểu mẫu sẽ giúp:

<form name="myform" novalidate>

Trong của bạn form, Bạn có thể inputcó requiredthuộc tính ẩn :

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

Không formthể tập trung vào các yếu tố đó, bạn phải xóa requiredkhỏi tất cả các đầu vào ẩn hoặc triển khai chức năng xác thực trong javascript để xử lý chúng nếu bạn thực sự yêu cầu đầu vào ẩn.

Trong trường hợp bất cứ ai khác có vấn đề này, tôi đã trải nghiệm điều tương tự. Như đã thảo luận trong các bình luận, đó là do trình duyệt đang cố xác thực các trường ẩn. Đó là tìm các trường trống trong biểu mẫu và cố gắng tập trung vào chúng, nhưng vì chúng được đặt thành display:none;nên không thể. Do đó có lỗi.

Tôi đã có thể giải quyết nó bằng cách sử dụng một cái gì đó tương tự như thế này:

$("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.
});

Ngoài ra, đây có thể là bản sao của "Điều khiển biểu mẫu không hợp lệ" chỉ trong Google Chrome

Trong trường hợp của tôi, vấn đề là với việc input type="radio" requiredbị ẩn với:

visibility: hidden;

Thông báo lỗi này cũng sẽ hiển thị nếu loại đầu vào được yêu cầu radiohoặc checkboxcó display: none;thuộc tính CSS.

Nếu bạn muốn tạo các đầu vào radio / hộp kiểm tùy chỉnh nơi chúng phải được ẩn khỏi UI và vẫn giữ requiredthuộc tính, thay vào đó bạn nên sử dụng:

opacity: 0; Thuộc tính CSS

Không có câu trả lời nào trước đây làm việc cho tôi và tôi không có bất kỳ trường ẩn nào với requiredthuộc tính.

Trong trường hợp của tôi, vấn đề là do có một <form>và sau đó một <fieldset>khi đứa con đầu lòng của nó, mà giữ <input>với requiredthuộc tính. Loại bỏ <fieldset>các vấn đề được giải quyết. Hoặc bạn có thể bọc hình thức của bạn với nó; nó được phép bởi HTML5.

Tôi đang dùng Windows 7 x64, phiên bản Chrome 43.0.2357.130 m.

Một khả năng khác nếu bạn gặp lỗi khi nhập hộp kiểm. Nếu các hộp kiểm của bạn sử dụng CSS tùy chỉnh ẩn mặc định và thay thế nó bằng một số kiểu dáng khác, điều này cũng sẽ gây ra lỗi không thể lấy nét trong Chrome về lỗi xác thực.

Tôi tìm thấy điều này trong bản định kiểu của mình:

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

Cách khắc phục đơn giản là thay thế nó bằng cái này:

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

Có thể là bạn có các trường ẩn (display: none) với thuộc tính bắt buộc .

Vui lòng kiểm tra tất cả các trường bắt buộc được hiển thị cho người dùng :)

Đối với tôi điều này xảy ra, khi có một <select>trường với tùy chọn được chọn trước có giá trị là '':

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

Thật không may, đó là giải pháp trình duyệt chéo duy nhất cho trình giữ chỗ ( Làm cách nào để tạo một trình giữ chỗ cho hộp 'chọn'? ).

Vấn đề xuất hiện trên Chrome 43.0.2357.124.

Nếu bạn có bất kỳ trường nào có thuộc tính bắt buộc không hiển thị trong khi gửi biểu mẫu, lỗi này sẽ bị ném. Bạn chỉ cần xóa thuộc tính bắt buộc khi bạn cố gắng ẩn trường đó. Bạn có thể thêm thuộc tính bắt buộc trong trường hợp nếu bạn muốn hiển thị lại trường. Bằng cách này, xác nhận của bạn sẽ không bị xâm phạm và đồng thời, lỗi sẽ không bị ném.

Đối với bài toán Chọn2

Vấn đề là do xác thực HTML5 không thể tập trung một yếu tố không hợp lệ ẩn. Tôi đã gặp vấn đề này khi tôi đang xử lý plugin jQuery Select2.

Giải pháp Bạn có thể đưa người nghe sự kiện vào và sự kiện 'không hợp lệ' của mọi thành phần của biểu mẫu để bạn có thể thao tác ngay trước sự kiện xác thực 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);          
});

Nó sẽ hiển thị thông báo đó nếu bạn có mã như thế này:

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

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

Phải .. Nếu một điều khiển biểu mẫu ẩn có trường bắt buộc thì nó sẽ hiển thị lỗi này. Một giải pháp sẽ là vô hiệu hóa điều khiển biểu mẫu này . Điều này là do thông thường nếu bạn đang ẩn một điều khiển biểu mẫu thì đó là do bạn không quan tâm đến giá trị của nó. Vì vậy, cặp giá trị tên điều khiển biểu mẫu này sẽ không được gửi trong khi gửi biểu mẫu.

Bạn có thể thử .removeAttribute("required")các yếu tố bị ẩn tại thời điểm tải cửa sổ. vì rất có thể là phần tử trong câu hỏi được đánh dấu ẩn do javascript (dạng thẻ)

ví dụ

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

Điều này nên làm nhiệm vụ.

Nó làm việc cho tôi ... chúc mừng

Một nguyên nhân có thể khác và không được đề cập trong tất cả các câu trả lời trước đó khi bạn có một biểu mẫu bình thường với các trường bắt buộc và bạn gửi biểu mẫu sau đó ẩn nó trực tiếp sau khi gửi (với javascript) không có thời gian để chức năng xác thực hoạt động.

Chức năng xác thực sẽ cố gắng tập trung vào trường bắt buộc và hiển thị thông báo xác thực lỗi nhưng trường đã bị ẩn, do đó "Điều khiển biểu mẫu không hợp lệ với name = '' không thể lấy nét được." xuất hiện!

Biên tập:

Để xử lý trường hợp này, chỉ cần thêm điều kiện sau vào trình xử lý trình của bạn

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

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

    // Submit and hide form safely
  }

Chỉnh sửa: Giải thích

Giả sử bạn đang ẩn biểu mẫu khi gửi, mã này đảm bảo rằng biểu mẫu / trường sẽ không bị ẩn cho đến khi biểu mẫu trở nên hợp lệ. Vì vậy, nếu một trường không hợp lệ, trình duyệt có thể tập trung vào nó mà không gặp vấn đề gì vì trường này vẫn được hiển thị.

Có những điều vẫn làm tôi ngạc nhiên ... Tôi có một hình thức với hành vi năng động cho hai thực thể khác nhau. Một thực thể yêu cầu một số lĩnh vực mà người khác không. Vì vậy, mã JS của tôi, tùy thuộc vào thực thể, thực hiện một số thứ như: $ ('# periodo'). RemoveAttr ('bắt buộc'); $ ("# periodo-container"). hide ();

và khi người dùng chọn thực thể khác: $ ("# periodo-container"). show (); $ ('# periodo'). prop ('bắt buộc', đúng);

Nhưng đôi khi, khi biểu mẫu được gửi, vấn đề xuất hiện: "Điều khiển biểu mẫu không hợp lệ với name = periodo '' không thể tập trung (tôi đang sử dụng cùng một giá trị cho id và tên).

Để khắc phục sự cố này, bạn phải đảm bảo rằng đầu vào nơi bạn đang đặt hoặc xóa 'bắt buộc' luôn hiển thị.

Vì vậy, những gì tôi đã làm là:

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

Đó là giải quyết vấn đề của tôi ... không thể tin được.

Trong trường hợp của tôi..

ng-showđã được sử dụng.
ng-ifđã được đặt vào vị trí của nó và sửa lỗi của tôi.

Đối với sử dụng góc:

ng-required = "boolean"

Điều này sẽ chỉ áp dụng thuộc tính 'bắt buộc' html5 nếu giá trị là đúng.

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

Tôi đến đây để trả lời rằng tôi đã tự kích hoạt vấn đề này dựa trên việc KHÔNG đóng </form>thẻ VÀ có nhiều biểu mẫu trên cùng một trang. Biểu mẫu đầu tiên sẽ mở rộng để bao gồm tìm kiếm xác nhận trên các biểu mẫu đầu vào từ nơi khác. Bởi vì các hình thức THOSE bị ẩn, chúng gây ra lỗi.

ví dụ:

<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>

Gây nên

Điều khiển biểu mẫu không hợp lệ với name = 'userId' không thể tập trung.

Điều khiển biểu mẫu không hợp lệ với name = 'password' không thể lấy nét được.

Điều khiển biểu mẫu không hợp lệ với name = 'xác nhận' là không thể tập trung.

Có nhiều cách để khắc phục điều này như

1. Thêm novalidate vào biểu mẫu của bạn nhưng nó hoàn toàn sai vì nó sẽ xóa xác thực biểu mẫu sẽ dẫn đến thông tin sai do người dùng nhập vào.

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

2. Sử dụng có thể loại bỏ thuộc tính bắt buộc khỏi các trường bắt buộc cũng sai vì nó sẽ xóa xác thực mẫu một lần nữa.

   Thay vì điều này:

<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. Sử dụng có thể vô hiệu hóa các trường bắt buộc khi bạn sẽ không gửi biểu mẫu thay vì thực hiện một số tùy chọn khác. Đây là giải pháp được đề nghị theo ý kiến ​​của tôi.

   giống:

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

hoặc vô hiệu hóa nó thông qua mã javascript / jquery tùy thuộc vào kịch bản của bạn.

Tôi đã tìm thấy vấn đề tương tự khi sử dụng Angular JS. Nó được gây ra từ việc sử dụng cần thiết cùng với ng-hide . Khi tôi nhấp vào nút gửi trong khi phần tử này bị ẩn thì đã xảy ra lỗi Điều khiển biểu mẫu không hợp lệ với name = '' không thể lấy nét được. cuối cùng

Ví dụ: sử dụng ng-hide cùng với yêu cầu:

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

Tôi đã giải quyết nó bằng cách thay thế yêu cầu bằng ng-mẫu thay thế.

Ví dụ về giải pháp:

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

Đối với những người dùng AngularJS 1.x khác, lỗi này xuất hiện do tôi đang ẩn điều khiển biểu mẫu hiển thị thay vì xóa hoàn toàn khỏi DOM khi tôi không cần phải hoàn thành điều khiển.

Tôi đã sửa lỗi này bằng cách sử dụng ng-ifthay vì ng-show/ ng-hidetrên div có chứa điều khiển biểu mẫu yêu cầu xác thực.

Hy vọng điều này sẽ giúp bạn người dùng trường hợp cạnh.

Hãy để tôi nêu trường hợp của tôi vì nó khác với tất cả các giải pháp trên. Tôi đã có một thẻ html không được đóng chính xác. phần tử thì không required , nhưng nó được nhúng vào hiddendiv

vấn đề trong trường hợp của tôi là type="datetime-local", vì - vì một số lý do - được xác nhận khi nộp mẫu đơn.

tôi đã thay đổi điều này

<input type="datetime-local" />

vào đó

<input type="text" />

Tôi muốn trả lời ở đây vì KHÔNG CÓ những câu trả lời này hoặc bất kỳ kết quả nào khác của Google đã giải quyết vấn đề cho tôi.

Đối với tôi nó không có gì để làm với các trường hoặc các đầu vào ẩn.

Tôi thấy rằng nếu tôi sử dụng max="5"(ví dụ) nó sẽ tạo ra lỗi này. Nếu tôi sử dụng maxlength="5" ... không có lỗi.

Tôi đã có thể tái tạo lỗi và xóa lỗi nhiều lần.

Tôi vẫn không biết tại sao sử dụng mã đó lại tạo ra lỗi, theo như điều này nói rằng nó phải hợp lệ, thậm chí không có "min" tôi tin.

Ngoài ra, một câu trả lời khác và hoàn hảo là sử dụng thuộc tính HTML5 Placeholder, sau đó sẽ không cần sử dụng bất kỳ xác thực js nào.

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

Chrome sẽ không thể tìm thấy bất kỳ yếu tố trống, ẩn và bắt buộc nào để tập trung vào. Giải pháp đơn giản.

Mong rằng sẽ giúp. Tôi hoàn toàn sắp xếp với giải pháp này.

Tôi đến đây với cùng một vấn đề. Đối với tôi (tiêm các yếu tố ẩn khi cần - tức là giáo dục trong ứng dụng công việc) có các cờ bắt buộc.

Những gì tôi nhận ra là trình xác nhận đã bắn vào tiêm nhanh hơn tài liệu đã sẵn sàng, do đó nó phàn nàn.

Thẻ ng-yêu cầu ban đầu của tôi là sử dụng thẻ hiển thị (vm.flags.hasHighSchool).

Tôi đã giải quyết bằng cách tạo một cờ chuyên dụng để đặt yêu cầu ng-required = "vm.flags.highSchoolRequired == true"

Tôi đã thêm một cuộc gọi lại 10ms khi cài đặt cờ đó và vấn đề đã được giải quyết.

 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>

Đảm bảo rằng tất cả các điều khiển trong biểu mẫu của bạn với thuộc tính bắt buộc cũng có bộ thuộc tính tên

Lỗi này xảy ra với tôi vì tôi đã gửi biểu mẫu với các trường bắt buộc không được điền.

Lỗi được tạo ra do trình duyệt đang cố tập trung vào các trường bắt buộc để cảnh báo người dùng các trường bắt buộc nhưng các trường bắt buộc đó được ẩn trong màn hình không có div nên trình duyệt không thể tập trung vào chúng. Tôi đã gửi từ một tab hiển thị và các trường bắt buộc nằm trong một tab ẩn, do đó lỗi.

Để khắc phục, hãy đảm bảo bạn kiểm soát các trường bắt buộc được điền.

Bởi vì có một đầu vào ẩn với thuộc tính bắt buộc trong biểu mẫu.

Trong trường hợp của tôi, tôi đã có một hộp chọn và nó được ẩn bởi mã thông báo jquery bằng cách sử dụng kiểu nội tuyến. Nếu tôi không chọn bất kỳ mã thông báo nào, trình duyệt sẽ đưa ra lỗi trên khi gửi biểu mẫu.

Vì vậy, tôi đã sửa nó bằng kỹ thuật css dưới đây:

  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;

 }

Tôi đã nhận được lỗi tương tự khi nhân bản một phần tử HTML để sử dụng trong một biểu mẫu.

(Tôi có một mẫu hoàn chỉnh một phần, có một mẫu được chèn vào đó, và sau đó mẫu được sửa đổi)

Lỗi là tham chiếu trường ban đầu, và không phải phiên bản nhân bản.

Tôi không thể tìm thấy bất kỳ phương pháp nào có thể buộc biểu mẫu tự đánh giá lại chính nó (với hy vọng nó sẽ thoát khỏi mọi tham chiếu đến các trường cũ không tồn tại) trước khi chạy xác thực.

Để giải quyết vấn đề này, tôi đã loại bỏ thuộc tính bắt buộc khỏi thành phần ban đầu và tự động thêm nó vào trường nhân bản trước khi đưa nó vào biểu mẫu. Biểu mẫu hiện xác nhận chính xác các trường được nhân bản và sửa đổi.