html5의 필수 입력을 사용할 때 발생하는 문제 및 해결 방법

양식을 제출할 때 입력을 숨기는 중 오류가 발생했습니다.

양식이 제출되면 일부 입력 태그가 숨겨지고 양식 확인 프로세스 중에 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 사용으로 인해 발생하므로 동일한 visible:hidden 도 문제를 일으킬 수 있으므로 사용하지 마세요. CSS 스타일 불투명도를 설정할 수 있습니다: 0;

5. 이 양식 컨트롤을 비활성화합니다. 비활성화됨 이는 일반적으로 양식 컨트롤을 숨기면 해당 값에 신경 쓰지 않기 때문입니다. 따라서 이 양식 컨트롤 이름 값 쌍은 양식이 제출될 때 전송되지 않습니다.

 $(body).on(submit, .myForm, function(evt) {// 유효성을 검사하고 싶지 않은 항목을 비활성화합니다.$([input:hidden, textarea:hidden, select:hidden]).attr(disabled , true);// 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 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!