[JQUERY] An invalid form control with name='' is not focusable. 원인

selectbox 선택 값에 따라 input 박스가 나타나거나 사라지는 기능 작업 중에

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

오류가 발생했다. (개발자 도구에서 확인 가능)

 

원인부터 말하자면 display가 none인 필드가 required 속성을 가지기 때문이다.

보이지 않는데 필수 속성인게 문제라는 것.

 

문제의 소스는 아래와 같다.

<div>
    <select name="category" id="category" required>
        <option value="">분류를 선택하세요</option>
        <option value="aaa">AAA</option>
        <option value="bbb">BBB</option>
    </select>
</div>

<div id="box1" <?php echo $category == 'aaa' ? '' : 'style="display:none"' ?>>
    <input type="text" name="content" id="content" <?php echo $category == 'aaa' ? '' : 'required' ?> class="<?php echo $category == 'aaa' ? '' : 'required' ?>">
</div>

<script>
$("#category").on("change", function(){
    var val = $(this).val();
    if (val == 'aaa')
    {
        $('#box1').show();
    }
    else {
        $('#box1').hide();
    }
});
</script>

 

category 선택값이 aaa로 변경되었을 때 box1이 보이게 한 코드이다.

input 속성을 보면 맨처음 해당 페이지에 접속했을 때 category 값에 따라 required 여부를 지정한다.

여기에 category 변경 값에 따라서도 required 여부를 변경해야 한다.

 

다음과 같이 스크립트를 변경한다.

<div>
    <select name="category" id="category" required>
        <option value="">분류를 선택하세요</option>
        <option value="aaa">AAA</option>
        <option value="bbb">BBB</option>
    </select>
</div>

<div id="box1" <?php echo $category == 'aaa' ? '' : 'style="display:none"' ?>>
    <input type="text" name="content" id="content" <?php echo $category == 'aaa' ? '' : 'required' ?> class="<?php echo $category == 'aaa' ? '' : 'required' ?>">
</div>

<script>
$("#category").on("change", function(){
    var val = $(this).val();
    if (val == 'aaa')
    {
        $('#box1').show();
        $('#box1').attr('required', true);
        if (!$('#box1').hasClass('required')) { $('#box1').addClass('required'); }
    }
    else {
        $('#box1').hide();
        $('#box1').attr('required', false);
        $('#box1').removeClass('required');
    }
});
</script>

attr을 설정하고 class도 부여해주면 해결 완..!