에러 내용
An invalid form control with name='content' is not focusable.
<textarea name="content" cols="40" rows="10" placeholder="내용을 입력하세요" required id="id_content" aria-hidden="true" style="display: none;"></textarea>
해결 방법
textarea의 스타일 속성(display: none) 또는 required 속성을 제거한다.
설명
이유 설명
내 경우 이 문제가 tinymce를 적용하다가 발생했다.
tinymce를 사용하면 기존 dom 요소에 display: none style을 적용해버리는데, 해당 태그에 required 속성이 존재했기 때문에 문제가 발생했다.
외부에 노출되지 않으니 form에서 해당 태그의 내용을 가져올 수 없고, required 속성을 만족하는지 판단할 수 없기 때문에 form이 넘어가질 못하는 것이었따.
문제를 해결하기 위해 tinymce를 적용하는 dom 요소에 한해 required 속성을 제거하는 스크립트를 추가해 문제를 해결하였다.
예시 코드
<script>
var textarea = document.querySelector('textarea[name=content][required]');
if (textarea) {
textarea.removeAttribute('required');
}
</script>