name = ''의 유효하지 않은 양식 컨트롤은 초점을 맞출 수 없습니다

웹 사이트에 심각한 문제가 있습니다. Chrome에서 일부 고객은 결제 페이지로 이동할 수 없습니다. 양식을 제출하려고 할 때이 오류가 발생합니다.

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

이것은 JavaScript 콘솔에서 온 것입니다.

필요한 속성을 가진 숨겨진 필드로 인해 문제가 발생할 수 있음을 읽었습니다. 이제 문제는 html5 필수 속성이 아닌 .net webforms 필수 필드 유효성 검사기를 사용하고 있다는 것입니다.

이 오류가 발생하는 사람은 무작위로 보입니다. 이에 대한 해결책을 아는 사람이 있습니까?

이 문제는 양식 필드의 유효성 검사에 실패한 경우 Chrome에서 발생하지만 각각의 유효하지 않은 컨트롤에 초점을 맞출 수 없기 때문에 브라우저에서 "이 필드를 입력하십시오" 라는 메시지를 표시하려는 시도 도 실패합니다.

여러 가지 이유로 유효성 검사가 트리거 될 때 양식 컨트롤에 포커스를 두지 못할 수 있습니다. 아래에 설명 된 두 가지 시나리오가 가장 두드러진 원인입니다.

• 이 필드는 비즈니스 로직의 현재 컨텍스트에 따라 관련이 없습니다. 이러한 시나리오에서는 해당 컨트롤을 DOM에서 제거하거나 required해당 시점에 속성 으로 표시하지 않아야 합니다.

• 사용자 가 입력에서 ENTER 키를 누르면 조기 검증이 발생할 수 있습니다 . 또는 컨트롤의 type속성을 올바르게 정의하지 않은 형태로 버튼 / 입력 컨트롤을 클릭하는 사용자 . 버튼의 type 속성이로 설정되어 있지 않은 경우 버튼 속성을 기본값으로 사용 button하므로 버튼을 클릭 할 때마다 Chrome (또는 해당 사안의 다른 브라우저)에서 유효성 검사를 수행 합니다.submittype

  문제를 해결하려면 페이지에 submit 또는 reset 이외의 다른 작업을 수행하는 버튼이있는 경우 항상 다음을 수행하십시오 <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.
});

또한 이것은 Chrome에서만 "잘못된 양식 컨트롤" 의 복제본 일 수 있습니다.

내 경우에는 문제는 다음과 같이 input type="radio" required숨겨져 있었습니다 .

visibility: hidden;

필요한 입력 유형이 경우에도이 오류 메시지가 표시됩니다 radio또는 checkbox가 display: none;CSS 속성을.

UI에서 숨겨져 있고 required속성을 유지 해야하는 사용자 지정 라디오 / 확인란 입력 을 만들려면 대신 다음을 사용해야합니다.

opacity: 0; CSS 속성

이전 답변 중 어느 것도 나를 위해 일하지 않았으며 required속성 이있는 숨겨진 필드가 없습니다 .

내 경우에는 문제가함으로써 발생 된 <form>후를 <fieldset>을 보유하고 첫 아이로 <input>와 required속성. <fieldset>문제를 해결하면 문제 가 해결되었습니다. 또는 양식을 양식으로 감쌀 수 있습니다. HTML5에 의해 허용됩니다.

Windows 7 x64, Chrome 버전 43.0.2357.130m에 있습니다.

체크 박스 입력에 오류가 발생하면 또 다른 가능성이 있습니다. 확인란이 기본값을 숨기고 다른 스타일로 대체하는 맞춤 CSS를 사용하는 경우 Chrome에서 유효성 검사 오류에 초점을 맞출 수없는 오류가 발생합니다.

내 스타일 시트에서 이것을 찾았습니다.

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

간단한 수정은 이것을 다음으로 대체하는 것이 었습니다.

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

필수 속성으로 필드를 숨겼을 수 있습니다 (표시 : 없음) .

모든 필수 필드가 사용자에게 표시되는지 확인하십시오. :)

나에게 이것은 <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 validate 이벤트 바로 전에 조작 할 수 있도록 양식의 모든 요소에 대해 이벤트 리스너 on 및 'invalid'이벤트를 삽입 할 수 있습니다.

$('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로) 유효성 검사 기능이 작동 할 시간이없는 다른 가능한 원인이 있으며 이전의 모든 답변에서 다루지 않았습니다.

유효성 검사 기능은 필수 필드에 초점을 맞추고 오류 유효성 검사 메시지를 표시하지만 해당 필드가 이미 숨겨져 있으므로 "name = ''의 유효하지 않은 양식 컨트롤에 포커스를 둘 수 없습니다." 나타납니다!

편집하다:

이 경우를 처리하려면 제출 핸들러 내에 다음 조건을 추가하십시오.

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 ( 'required'); $ ( "# periodo-container"). hide ();

그리고 사용자가 다른 엔티티를 선택할 때 : $ ( "# periodo-container"). show (); $ ( '# periodo'). prop ( '필수', 참);

그러나 때로는 양식을 제출할 때 "이름이 periodo 인 잘못된 양식 컨트롤"에 초점을 맞출 수없는 문제가 나타납니다 (ID와 이름에 동일한 값을 사용하고 있음).

이 문제를 해결하려면 '필수'를 설정하거나 제거하는 입력이 항상 표시되도록해야합니다.

그래서 내가 한 일은 :

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

그게 내 문제를 해결했다 ... 믿을 수없는.

나의 경우에는..

ng-show사용되었습니다.
ng-if그 자리에 넣고 내 오류를 수정했습니다.

각도 사용의 경우 :

ng-required = "boolean"

값이 true 인 경우 html5 '필수'속성 만 적용됩니다.

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

나는 </form>태그를 닫지 않고 동일한 페이지에 여러 양식을 가지고 있기 때문에이 문제를 직접 시작했다고 대답하기 위해 여기에 왔습니다 . 첫 번째 양식은 다른 곳에서 양식 입력에 대한 검증을 포함하도록 확장 될 것입니다. THOSE 양식이 숨겨져 있기 때문에 오류가 발생했습니다.

예를 들어 :

<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'인 잘못된 양식 컨트롤은 포커스를 맞출 수 없습니다.

name = 'password'인 유효하지 않은 양식 제어는 초점을 맞출 수 없습니다.

이름이 'confirm'인 잘못된 양식 컨트롤은 포커스를 맞출 수 없습니다.

이 문제를 해결하는 방법에는 여러 가지가 있습니다

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

또는 자바 스크립트 / jquery 코드를 통해 비활성화하면 시나리오에 따라 다릅니다.

Angular JS를 사용할 때도 같은 문제가 발견되었습니다. ng-hide 와 함께 필수 를 사용 했기 때문에 발생했습니다 . 이 요소가 숨겨져있는 동안 제출 버튼을 클릭하면 오류가 발생했습니다 . 드디어!

예를 들어 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-showng-hide유효성 검사가 필요한 양식 컨트롤을 포함하는 div 를 .

이것이 동료 사용자를 도울 수 있기를 바랍니다.

위의 모든 솔루션과 다르기 때문에 사례를 설명하겠습니다. 올바르게 닫히지 않은 html 태그가 있습니다. 요소는 아니 required 었지만hidden div

내 경우의 문제는 type="datetime-local" 양식 제출시 유효성을 검사 한.

나는 이것을 바꿨다

<input type="datetime-local" />

그것에

<input type="text" />

이 답변 중 어느 것도 또는 다른 Google 검색 결과로 문제를 해결했기 때문에 여기에 답변하고 싶었습니다.

나를 위해 그것은 필드 세트 또는 숨겨진 입력과 관련이 없습니다.

max="5"예를 들어 사용 하면이 오류가 발생 한다는 것을 알았습니다 . 내가 사용하면 maxlength="5" ... 오류가 없습니다.

오류와 오류 지우기를 여러 번 재현 할 수있었습니다.

이 코드를 사용하면 오류가 발생하는 이유는 아직까지로, 알 수없는 이 상태는 심지어 내가 믿습니다 "분"하지 않고, 유효해야합니다.

또는 HTML5 자리 표시 자 속성을 사용하는 또 다른 완벽한 대답은 js 유효성 검사를 사용할 필요가 없습니다.

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

Chrome은 초점을 맞추기 위해 비어 있거나 숨겨진 필수 요소를 찾을 수 없습니다. 간단한 해결책.

희망이 도움이됩니다. 이 솔루션으로 완전히 정렬되었습니다.

나는 같은 문제로 여기에 왔습니다. 나에게 (필요에 따라 숨겨진 요소를 주입하는 것, 즉 직업 앱에서의 교육)에는 필요한 플래그가있었습니다.

내가 깨달은 것은 문서가 준비된 것보다 검사기가 주입 된 것보다 빠르게 발사되었다는 것입니다.

내 원래 ng-required 태그는 공개 태그 (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 토크 나이저에 의해 숨겨져 있습니다. 토큰을 선택하지 않으면 양식 제출시 브라우저에서 위의 오류가 발생합니다.

그래서 아래 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 요소를 복제 할 때 동일한 오류가 발생했습니다.

(부분적으로 완전한 양식이 있으며 템플릿이 삽입 된 다음 템플릿이 수정됩니다)

오류가 복제 된 버전이 아닌 원래 필드를 참조하고있었습니다.

유효성 검사를 실행하기 전에 양식이 자체적으로 다시 평가되도록하는 방법을 찾을 수 없었습니다 (현재 존재하지 않는 이전 필드에 대한 참조를 제거하기를 바랍니다).

이 문제를 해결하기 위해 원래 요소에서 필수 속성을 제거하고 양식에 삽입하기 전에 복제 된 필드에 동적으로 추가했습니다. 양식은 이제 복제 및 수정 된 필드의 유효성을 올바르게 검사합니다.