폼 문의드립니다! 채택완료

아래의 코드를 한번 참고를 해보세요..

<div id="section5" class="section">
    <div class="left">
        <div class="msg">
            <h2>연락처를 입력해주세요.</h2>
        </div>
    </div>
    <div class="right flex">
        <div class="form2">
            <input type="text" id="전화번호" name="tel1" maxlength="11" placeholder="연락처를 입력해주세요.">
            <p id="phoneError" style="color: red; display: none;">11자리 번호를 입력해 주세요.</p>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const phoneInput = document.getElementById('전화번호');
    const phoneError = document.getElementById('phoneError');
    const form = phoneInput.closest('form'); // 폼 요소를 찾습니다

    form.addEventListener('submit', function(event) {
        if (phoneInput.value.length !== 11) {
            event.preventDefault(); // 폼 제출을 막습니다
            phoneError.style.display = 'block'; // 에러 메시지를 표시합니다
            phoneInput.focus(); // 입력 필드에 포커스를 줍니다
        } else {
            phoneError.style.display = 'none'; // 에러 메시지를 숨깁니다
        }
    });

    phoneInput.addEventListener('input', function() {
        if (this.value.length === 11) {
            phoneError.style.display = 'none'; // 11자리가 입력되면 에러 메시지를 숨깁니다
        }
    });
});
</script>