안녕하세요 오늘은 Tailwind로 유효성 검사 기능이 들어한 회원가입 만들어보겠습니다.
해당 회원가입 폼은
입력 값에 대한 유효성 검사를 실시간으로 수행하고 유효성 검사가 통과되면 제출 버튼이 활성화됩니다.
index.html 파일에 다음과 같이 코드를 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Form with Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200 flex items-center justify-center h-screen">
<div class="bg-white p-8 rounded-lg shadow-lg max-w-sm w-full">
<h1 class="text-xl mb-4">회원 가입</h1>
<form id="signup-form">
<div class="mb-4">
<label for="name" class="block text-sm font-medium text-gray-700">이름</label>
<input type="text" id="name" name="name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
<p id="name-error" class="text-red-500 text-xs hidden">유효한 이름을 입력하세요.</p>
</div>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700">이메일</label>
<input type="email" id="email" name="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
<p id="email-error" class="text-red-500 text-xs hidden">유효한 이메일 주소를 입력하세요.</p>
</div>
<button type="submit" id="submit-button" class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-700 disabled:bg-gray-300" disabled>제출</button>
</form>
</div>
</body>
<script>
// 폼 요소와 필드들을 ID로 찾아 변수에 할당합니다.
const form = document.getElementById('signup-form'); // 폼 요소를 가져옵니다.
const nameInput = document.getElementById('name'); // 이름 입력 필드를 가져옵니다.
const emailInput = document.getElementById('email'); // 이메일 입력 필드를 가져옵니다.
const submitButton = document.getElementById('submit-button'); // 제출 버튼을 가져옵니다.
const nameError = document.getElementById('name-error'); // 이름 에러 메시지를 표시할 요소를 가져옵니다.
const emailError = document.getElementById('email-error'); // 이메일 에러 메시지를 표시할 요소를 가져옵니다.
// 입력 필드의 유효성을 검사하는 함수입니다.
function validateInput() {
let valid = true; // 입력이 유효한지 판단하는 변수입니다.
// 이름 입력 필드의 유효성 검사
if (nameInput.value.trim() === '') { // 이름 필드가 비어있는지 확인
nameError.classList.remove('hidden'); // 에러 메시지를 보여줍니다.
valid = false; // 유효하지 않다고 표시
} else {
nameError.classList.add('hidden'); // 에러 메시지를 숨깁니다.
}
// 이메일 입력 필드의 유효성 검사
if (!emailInput.value.includes('@') || emailInput.value.trim() === '') { // 이메일 필드가 '@'를 포함하지 않거나 비어있는지 확인
emailError.classList.remove('hidden'); // 에러 메시지를 보여줍니다.
valid = false; // 유효하지 않다고 표시
} else {
emailError.classList.add('hidden'); // 에러 메시지를 숨깁니다.
}
// 제출 버튼의 활성화 상태를 업데이트
submitButton.disabled = !valid; // 모든 입력이 유효하면 버튼을 활성화, 그렇지 않으면 비활성화
}
// 입력 필드에서 입력이 이루어질 때마다 유효성 검사 함수를 호출
nameInput.addEventListener('input', validateInput); // 이름 필드에 입력이 있을 때 함수를 호출
emailInput.addEventListener('input', validateInput); // 이메일 필드에 입력이 있을 때 함수를 호출
// 폼 제출 이벤트를 처리
form.addEventListener('submit', function(event) {
event.preventDefault(); // 폼의 기본 제출 동작을 방지
alert('Form Submitted Successfully!'); // 폼 제출이 성공적이라는 알림을 표시
});
</script>
</html>
다음은 위에 대한 시연 영상입니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] Tailwind로 비밀번호 일치 여부 확인하기 (0) | 2024.04.24 |
|---|---|
| [HTML/CSS] @keyframes 활용 마우스 클릭 이벤트 (0) | 2024.04.20 |
| [HTML/CSS] Bootstrap의 Toast 기능 사용하기 (0) | 2024.04.08 |
| [HTML/CSS] 레이아웃 만들기 (0) | 2024.03.16 |
| [HTML/CSS] Bootstrap으로 아코디언 만들기 (0) | 2024.03.12 |
