focus()와 유효성 검사 예시
- 예시 코드
<!DOCTYPE html>
<html lang="en">
<head>
<title>유효성 검사와 focus()</title>
<script>
function validateForm() {
const nameField = document.getElementById('name');
const emailField = document.getElementById('email');
const ageField = document.getElementById('age');
// 이름 필드 유효성 검사 (공백 확인)
if (nameField.value == "") {
alert("이름을 입력해주세요.");
nameField.focus(); // 이름 필드로 포커스를 이동
return false;
}
// 이메일 필드 유효성 검사 (이메일 형식 확인)
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(emailField.value)) {
alert("유효한 이메일을 입력해주세요.");
emailField.focus(); // 이메일 필드로 포커스를 이동
return false;
}
// 나이 필드 유효성 검사 (숫자 확인)
if (isNaN(ageField.value) || ageField.value <= 0) {
alert("유효한 나이를 입력해주세요.");
ageField.focus(); // 나이 필드로 포커스를 이동
return false;
}
return true; // 유효성 검사를 통과하면 폼을 제출
}
</script>
</head>
<body>
<form onsubmit="return validateForm()">
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">이메일:</label>
<input type="text" id="email" name="email"><br><br>
<label for="age">나이:</label>
<input type="text" id="age" name="age"><br><br>
<input type="submit" value="제출">
</form>
</body>
</html>- 실행 결과
- 설명
- 유효성 검사 함수(validateForm)
- 폼이 제출되기 전 호출
- 각 입력 필드의 값이 유효한지 검사 후 문제가 있을 경우 focus() 메서드를 호출하여 해당 필드로 포커스 이동
- focus()
- 문제가 발생한 필드에 커서를 자동으로 위치시킴
- 사용자가 어디에서 수정이 필요한지 즉시 알 수 있음.
- 유효성 검사 조건
- 이름 필드가 비어있을 경우 경고 메시지 띄우고, 이름 입력 필드로 포커스 이동
- 이메일 형식이 맞지 않으면 경고를 띄우고, 이메일 필드로 포커스 이동
- 나이가 숫자가 아니거나 0보다 작으면 경고 메시지 띄우고 나이 필드로 포커스 이동
- 유효성 검사 함수(validateForm)
focus() 메서드 특징
- 포커스 이동
- focus()를 호출하면 해당 요소가 활성화되어 사용자가 키보드로 바로 입력 가능
- 사용 시점
- 주로 유효성 검사나 페이지로드 시 중요한 입력 필드로 포커스를 미리 설정할 때 사용
이것저것 다 적는 기록장📚