이름이 ='인 잘못된 양식 컨트롤을 포커스할 수 없습니다.
Google Chrome에서 일부 고객이 내 결제 페이지로 진행할 수 없습니다.양식을 제출할 때 다음 오류가 발생합니다.
이름이 ='인 잘못된 양식 컨트롤을 포커스할 수 없습니다.
이것은 JavaScript 콘솔에서 가져온 것입니다.
필요한 속성을 가진 숨겨진 필드 때문에 문제가 발생할 수 있다고 읽었습니다.이제 문제는 html5 필수 속성이 아닌 .net webforms 필수 필드 검증자를 사용하고 있다는 것입니다.
누가 이 오류를 얻었는지는 무작위인 것 같습니다.이것에 대한 해결책을 아는 사람이 있습니까?
양식 필드의 유효성을 검사하지 못하는 경우 Chrome에서 이 문제가 발생하지만, 각각의 잘못된 컨트롤에 초점을 맞출 수 없기 때문에 옆에 "Please fill this field" 메시지를 표시하려는 브라우저의 시도도 실패합니다.
유효성 검사가 트리거될 때는 몇 가지 이유로 인해 폼 컨트롤에 포커스를 맞출 수 없습니다.아래에 설명된 두 가지 시나리오가 가장 두드러진 원인입니다.
비즈니스 논리의 현재 맥락에 따라 해당 분야는 무관합니다.이하거나, "DOM", "DOM"으로. 또는 다음과 같이 표시되지 않아야 합니다.
required속성을 입력합니다.사용자가 입력에서 ENTER 키를 눌러 유효성 검사가 너무 일찍 수행될 수 있습니다.또는 컨트롤의 속성을 올바르게 정의하지 않은 양식의 버튼/입력 컨트롤을 클릭하는 사용자.단추의 유형 특성이 로 설정되지 않은 경우 Chrome(또는 해당 사항에 대한 다른 브라우저)는 단추 특성의 기본값이기 때문에 단추를 클릭할 때마다 유효성 검사를 수행합니다.
문제를 해결하려면 페이지에 제출 또는 재설정 이외의 다른 작업을 수행하는 단추가 있는 경우 항상 다음 작업을 수행해야 합니다.<button type="button">.
추가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;
한 입력 유형이 이 메 필 지 는 한 유 에 도 표 됩 니 다 시 서 대 해 형 력 입 오 요 류 시 ▁the ▁message ▁if ▁will ▁type ▁this ▁show 다 니 ▁also ▁input 됩이 ▁error 표radio또는checkbox을 가지고 있습니다.display: none;CSS 속.
사용자 지정 라디오/체크박스 입력을 생성하려면 UI에서 숨겨야 하며 계속 유지해야 합니다.required다음을 .
opacity: 0;CSS 속
다른 답변에 언급된 필드뿐만 아니라잘못된 값을 포함하는 숨겨진 필드에 필드를 배치하는 경우에도 발생합니다.
아래의 예를 고려해 보십시오.
<div style="display:none;">
<input type="number" name="some" min="1" max="50" value="0">
</div>
이 경우 동일한 오류가 발생합니다.그러니 꼭 확인하세요.<input> 내부의 필드<div>잘못된 값을 포함하지 않습니다.
이 문제는 style="display: none;" 및 필수 특성을 입력 필드에 제공할 때 발생하며 제출 시 검증이 있을 것입니다.예:
<input type="text" name="name" id="name" style="display: none;" required>
HTML의 입력 필드에서 필수 속성을 제거하여 이 문제를 해결할 수 있습니다. 필수 속성을 추가해야 할 경우 동적으로 추가하십시오.JQuery를 사용하는 경우 아래 코드를 사용합니다.
$("input").prop('required',true);
이 필드를 동적으로 제거해야 하는 경우
$("input").prop('required',false);
JQuery를 사용하지 않는 경우 일반 Javascript를 사용할 수도 있습니다.
document.getElementById('element_id').removeAttribute('required');
이전 답변 중 어떤 것도 저에게 효과가 없었고, 저는 숨겨진 필드가 없습니다.required기여하다.
나의 경우, 문제는 그것을 가지고 있기 때문입니다.<form> 그다에음.<fieldset>그것의 첫 번째 아이로서, 그것은 그것을 보유합니다.<input>required기다하. 하는 것.<fieldset>문제를 해결했습니다. 수 . html5에 됩니다.
저는 윈도우 7 x 64, 크롬 버전 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 유효성 검사 이벤트 직전에 조작할 수 있도록 양식의 모든 요소에 대해 이벤트 수신기와 '잘못된' 이벤트를 주입할 수 있습니다.
$('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);
});
양식 제출 중에 볼 수 없는 필수 속성을 가진 필드가 있으면 이 오류가 발생합니다.해당 필드를 숨기려고 할 때 필요한 특성을 제거하기만 하면 됩니다.필드를 다시 표시하려는 경우 필요한 속성을 추가할 수 있습니다.이렇게 하면 유효성 검사가 손상되지 않고 동시에 오류가 발생하지 않습니다.
모든 사람들이 검증을 제거하자고 제안하는 것이 이상합니다. 검증은 이유가 있습니다.어쨌든 사용자 지정 컨트롤을 사용하고 있고 검증을 유지하려는 경우 다음과 같이 할 수 있습니다.
첫걸음.입력에서 디스플레이 없음을 제거하여 입력에 초점을 맞출 수 있도록 합니다.
.input[required], .textarea[required] {
display: inline-block !important;
height: 0 !important;
padding: 0 !important;
border: 0 !important;
z-index: -1 !important;
position: absolute !important;
}
두 번째 단계.스타일이 충분하지 않은 경우 특정 경우 입력에 잘못된 이벤트 처리기 추가
inputEl.addEventListener('invalid', function(e){
//if it's valid, cancel the event
if(e.target.value) {
e.preventDefault();
}
});
필수 속성을 가진 입력 요소를 숨길 경우 발생합니다.
사하는대를 사용하는 에.display:none사용할 수 있습니다.opacity: 0;
나는 또한 몇 가지 CSS 규칙을 사용해야 했습니다.position:absolute내를 완벽하게 내 요소를 완벽하게 배치합니다.
다음과 같은 코드가 있는 경우 메시지가 표시됩니다.
<form>
<div style="display: none;">
<input name="test" type="text" required/>
</div>
<input type="submit"/>
</form>
예... 숨김 양식 컨트롤에 필수 필드가 있으면 이 오류가 표시됩니다.한 가지 해결책은 이 양식 제어를 비활성화하는 것입니다.이는 일반적으로 폼 컨트롤을 숨기는 경우 폼 컨트롤의 값에 관심이 없기 때문입니다.따라서 양식을 제출하는 동안 이 양식 컨트롤 이름 값 쌍은 전송되지 않습니다.
저는 제가 직접 이 문제를 유발했다고 답변하기 위해 여기에 왔습니다.</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'인 잘못된 양식 컨트롤은 포커스를 맞출 수 없습니다.
이름이 ='password'인 잘못된 양식 컨트롤은 포커스를 맞출 수 없습니다.
이름이 =인 잘못된 양식 컨트롤은 포커스를 맞출 수 없습니다.
필수 필드가 있는 일반 양식을 가지고 있고 양식을 제출한 후 제출한 직후(javascript 사용) 검증 기능이 작동할 시간이 없는 경우 이전 답변에서 다루지 않은 또 다른 가능한 원인입니다.
유효성 검사 기능이 필수 필드에 초점을 맞추고 오류 유효성 검사 메시지를 표시하려고 하지만 필드가 이미 숨겨졌기 때문에 "이름=이(가) 잘못된 양식 컨트롤에 포커스를 맞출 수 없습니다."가 나타납니다.
편집:
이 케이스를 처리하려면 제출 핸들러 내에 다음 조건을 추가하면 됩니다.
submitHandler() {
const form = document.body.querySelector('#formId');
// Fix issue with html5 validation
if (form.checkValidity && !form.checkValidity()) {
return;
}
// Submit and hide form safely
}
편집: 설명
제출 시 양식을 숨기는 경우, 이 코드는 양식이 유효해질 때까지 양식/필드가 숨겨지지 않도록 보장합니다.따라서 필드가 유효하지 않은 경우 이 필드가 계속 표시되므로 브라우저는 문제 없이 해당 필드에 초점을 맞출 수 있습니다.
이것을 고치는 방법은 여러 가지가 있습니다.
- 양식에 유효성 검사를 추가하지 마십시오. 양식 유효성 검사가 제거되어 사용자가 잘못된 정보를 입력할 수 있습니다.
<form action="...." class="payment-details" method="post" novalidate>
사용은 필수 필드에서 필수 속성을 제거할 수 있으며, 양식 유효성 검사를 다시 제거하기 때문에 잘못된 것이기도 합니다.
이 대신:
<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">
양식을 제출하지 않을 때 다른 선택사항을 수행하는 대신 필수 필드를 사용 불가능으로 설정할 수 있습니다.이것이 제가 생각하는 권장 해결책입니다.
예:
<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">
또는 시나리오에 따라 Javascript/jquery 코드를 통해 비활성화합니다.
..removeAttribute("required")로 인해 것으로 높기 에,문제의 요소가 Javascript(탭 형식)로 인해 숨겨진 것으로 표시되었을 가능성이 매우 높기 때문입니다.
예.
if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
document.getElementById('hidden_field').removeAttribute("required");
}
이렇게 하면 작업이 수행됩니다.
저한테는 효과가 있었어요건배.
아직도 나를 놀라게 하는 것들이 있습니다.저는 두 개의 다른 실체에 대한 역동적인 행동을 가진 형태를 가지고 있습니다.한 엔터티에는 다른 엔터티에는 없는 일부 필드가 필요합니다.따라서 엔티티에 따라 JS 코드는 $('#periodo'), removeAttr('required'), $("#periodo-container"), hide()와 같은 작업을 수행합니다.
사용자가 다른 엔티티 $("#periodo-interval")를 선택한 경우.show(); $('#periodo').prop('required', true);
그러나 양식을 제출할 때 "name=periodo가 포함된 잘못된 양식 컨트롤"이 포커스를 맞출 수 없는 경우가 있습니다(ID와 이름에 동일한 값을 사용하고 있습니다).
이 문제를 해결하려면 '필수'를 설정하거나 제거하는 입력이 항상 표시되도록 해야 합니다.
그래서, 제가 한 일은:
$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required');
$("#periodo-container").hide(); //then hide
그게 내 문제를 해결했어요...믿을 수가 없네.
저 같은 경우에는..
ng-show사용되고 있었습니다.
ng-if그 자리에 배치되어 제 실수를 고쳤습니다.
와, 여기 답이 많네요!
가 만약문인 <input type="hidden" required="true" />그러면 당신은 이것을 몇 줄로 풀 수 있습니다.
논리는 간단하고 간단합니다.
- 페이지 로드에서 필요한 모든 입력을 다음과 같이 표시합니다.
data-required학생들 - 때 두합니다. 하기. a) 추가하기.
required="true"누구에게나data-required inputs. b) Remove숨겨진 모든 입력에서 required="true".
HTML
<input type="submit" id="submit-button">
순수 자바스크립트
document.querySelector('input,textarea,select').filter('[required]').classList.add('data-required');
document.querySelector('#submit-button').addEventListener('click', function(event) {
document.querySelector('.data-required').prop('required', true);
document.querySelector('input,textarea,select').filter('[required]:hidden').prop('required', false);
return true;
}
jQuery
$('input,textarea,select').filter('[required]').addClass('data-required');
$('#submit-button').on('click', function(event) {
$('.data-required').prop('required', true);
$('input,textarea,select').filter('[required]:hidden').prop('required', false);
return true;
}
각도 사용:
ng-required="message"
값이 참인 경우에만 html5 'required' 특성이 적용됩니다.
<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />
Angular JS를 사용할 때도 같은 문제가 발견되었습니다.ng-hide와 함께 필수로 사용했기 때문에 발생한 것입니다.이 요소가 숨겨져 있는 동안 제출 버튼을 클릭하면 "이름=이(가) 잘못된 양식 컨트롤에 포커스를 맞출 수 없습니다."라는 오류가 발생했습니다.드디어!
ng-hide를 필수와 함께 사용하는 예:
<input type="text" ng-hide="for some condition" required something >
대신 ng-pattern으로 required를 교체하여 해결하였습니다.
솔루션의 예:
<input type="text" ng-hide="for some condition" ng-pattern="some thing" >
지정하는 경우에만 해당되지 않습니다.required사용할 때도 이 문제가 발생했습니다.min그리고.max
<input type="number" min="1900" max="2090" />
해당 필드는 숨겨지고 다른 무선 값을 기준으로 표시될 수 있습니다.그래서 임시 해결을 위해 검증을 제거했습니다.
저는 이 질문이 자주 제기되는 것을 보았고 이 '오류'를 직접 접했습니다.심지어 이것이 크롬의 실제 버그인지에 대해 의문을 제기하는 링크도 있었습니다.
이것은 하나 이상의 양식 입력 유형 요소가 숨겨져 있고 이러한 요소에 최소/최대 제한(또는 기타 유효성 검사 제한)이 부과된 경우 발생하는 응답입니다.
양식을 만들 때 요소에 대한 값이 없으며 나중에 요소 값이 채워지거나 변경되지 않은 상태로 유지될 수 있습니다.제출할 때 양식이 구문 분석되고 이러한 유효성 검사 제한을 벗어나는 숨겨진 요소는 콘솔에 이 '오류'를 던지고 제출이 실패합니다.숨겨진 요소이기 때문에 이러한 요소에 액세스할 수 없으므로 유효한 응답은 이것뿐입니다.
이것은 실제 결함이나 버그가 아닙니다.하나 이상의 요소에 의해 규정된 제한을 벗어나는 요소 값이 제출될 예정임을 나타냅니다.
이 문제를 해결하려면 양식을 제출하기 전에 언제든지 양식에 숨겨진 요소에 유효한 기본값을 할당하면 이러한 '오류'가 발생하지 않습니다.그것은 그런 버그가 아니라 단지 당신이 더 나은 프로그래밍 습관을 갖도록 강요하는 것입니다.
NB: 이러한 값을 유효성 검사 한계를 벗어난 값으로 설정하려면 form.addEventListener('submit', myFunction)를 사용하여 'submit' 이벤트를 가로채고 "myFunction"에 이러한 요소를 입력합니다.유효성 검사가 "myFunction()"을 호출하기 전에 수행된 것 같습니다.
양식에 필수 속성이 있는 숨겨진 입력이 있기 때문입니다.
저의 경우 선택 상자가 있었는데 인라인 스타일을 사용하는 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;
}
다른 AngularJS 1.x 사용자의 경우 이 오류가 발생한 이유는 DOM에서 폼 컨트롤을 완전히 제거하는 대신 폼 컨트롤이 표시되지 않도록 숨기고 있었기 때문입니다.
검증이 필요한 폼 컨트롤이 포함된 div 대신 /를 사용하여 수정했습니다.ng-hide
이것이 동료 에지 사례 사용자에게 도움이 되기를 바랍니다.
언급URL : https://stackoverflow.com/questions/22148080/an-invalid-form-control-with-name-is-not-focusable
'programing' 카테고리의 다른 글
| 명령줄을 사용하여 디렉토리 및 해당 파일 삭제, 존재하지 않는 경우 오류 발생 안 함 (0) | 2023.04.29 |
|---|---|
| bash 스크립트를 사용하여 파일 이름의 공백을 바꾸는 방법 (0) | 2023.04.29 |
| 누를 때마다 사용자 이름을 묻는 Git (0) | 2023.04.29 |
| bash에서 json 파일을 구문 분석하기 위해 jq 출력에서 이중 따옴표를 제거하는 방법은 무엇입니까? (0) | 2023.04.29 |
| 문자열을 이중으로 변환하는 방법과 이중으로 변환하는 방법은 무엇입니까? (0) | 2023.04.29 |