폼 문의드립니다!
본문
https://livelivem.com/livelive21/landing/2017/live2/livedental_b_7777.html
위 사이트 전화번호 부분이 최대 11자리로 입력되게는 해놨는데
11자리가 안되면 번호를 입력해 주세요 라는 문구가 나오면서 신청이 안되게
하고싶습니다.ㅠ
소스 도움좀 부탁드려용!
답변 1
아래의 코드를 한번 참고를 해보세요..
<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>
