From f0a69d83752d607acde9e11c68a6610adf90dc38 Mon Sep 17 00:00:00 2001 From: sinyroom Date: Wed, 30 Apr 2025 18:16:56 +0900 Subject: [PATCH 1/2] feat: Add login page error message --- .DS_Store | Bin 6148 -> 6148 bytes js/login.js | 80 ++++++++++++++++++++++++++++++++++++ js/signup.js | 49 ++++++++++++++++------ login-page.html | 7 +++- signup-page.html | 4 +- style/login-signup-page.css | 7 ++++ 6 files changed, 130 insertions(+), 17 deletions(-) create mode 100644 js/login.js diff --git a/.DS_Store b/.DS_Store index 4270b9081bb5e7916d1c6c07def301eb27c7f084..f5b1eaec9fc429dcaac5c33ab76965a584a00f70 100644 GIT binary patch delta 37 tcmZoMXfc@J&&WP8U^gTCWFAH-RwjllhT_SFjN+RO8IQ7UX6N|J4* delta 34 qcmZoMXfc@J&&W10U^gS%WFAJT$$pI7o1GYsvQ2Cd+|17LmmdJJ<_byx diff --git a/js/login.js b/js/login.js new file mode 100644 index 00000000..46ac6bd3 --- /dev/null +++ b/js/login.js @@ -0,0 +1,80 @@ +function showError(inputEl, message) { + const errorEl = inputEl.parentElement.querySelector('.error-message'); + inputEl.classList.add('error'); + if (errorEl) errorEl.textContent = message; +} + +function clearError(inputEl) { + const errorEl = inputEl.parentElement.querySelector('.error-message'); + inputEl.classList.remove('error'); + if (errorEl) errorEl.textContent = ''; +} + +// 이메일 input에서 focus out 할 때, +// 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다. +// 이메일 input에서 focus out 할 때, +// 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다. + +const emailInput = document.querySelector('#login-email'); +const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; + +emailInput.addEventListener('focusout', function() { + if (emailInput.value === '') { + showError(emailInput, '이메일을 입력해주세요.'); + } else if (!emailPattern.test(emailInput.value)) { + showError(emailInput, '잘못된 이메일 형식입니다'); + } else { + clearError(emailInput); + } +}); + +// 비밀번호 input에서 focus out 할 때, +// 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다 +// 비밀번호 input에서 focus out 할 때, +// 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다. + +const pwInput = document.querySelector('#password'); + +function validatePassword() { + if (pwInput.value === '') { + showError(pwInput, '비밀번호를 입력해주세요.'); + } else if (pwInput.value.length < 8) { + showError(pwInput, '비밀번호를 8자 이상 입력해주세요.'); + } else { + clearError(pwInput)}; +} + +pwInput.addEventListener('focusout', validatePassword) +pwInput.addEventListener('input', validatePassword) + +// input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다. +// Input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다. + +const allInput = document.querySelectorAll('input'); +const loginBtn = document.querySelector('#login-btn'); + +function checkAllValid() { + let isValid = true; + + allInput.forEach((input) => { + const errorText = input.parentElement.querySelector('.error-message').textContent; + if (input.value ==='' || errorText !== '') { + isValid = false; + } + }); + + loginBtn.disabled = !isValid; +} + +allInput.forEach((input) => { + input.addEventListener('input', checkAllValid); + input.addEventListener('focusout', checkAllValid); +}); + +// 활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다. + +loginBtn.addEventListener('click', () => { + if (!loginBtn.disabled) { + window.location.href = '/itmes'; + } +}); diff --git a/js/signup.js b/js/signup.js index 6c2fd823..bf9fc12a 100644 --- a/js/signup.js +++ b/js/signup.js @@ -11,12 +11,10 @@ function clearError(inputEl) { } // 이메일 input에서 focus out 할 때, -// 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” -// 빨강색 에러 메세지를 보입니다. +// 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다. // 이메일 input에서 focus out 할 때, -// 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” -// 빨강색 에러 메세지를 보입니다. +// 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다. const emailInput = document.querySelector('#login-email'); const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; @@ -27,12 +25,12 @@ emailInput.addEventListener('focusout', function() { } else if (!emailPattern.test(emailInput.value)) { showError(emailInput, '잘못된 이메일 형식입니다'); } else { - clearError(emailInput)}; - }); + clearError(emailInput); + } +}); // 닉네임 input에서 focus out 할 때, -// 값이 없을 경우 input에 빨강색 테두리와 아래에 “닉네임을 입력해주세요.” -// 빨강색 에러 메세지를 보입니다. +// 값이 없을 경우 input에 빨강색 테두리와 아래에 “닉네임을 입력해주세요.” 빨강색 에러 메세지를 보입니다. const nicknameInput = document.querySelector('#nickname'); @@ -45,15 +43,15 @@ nicknameInput.addEventListener('focusout', function() { }); // 비밀번호 input에서 focus out 할 때, -// 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” -// 에러 메세지를 보입니다 +// 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다 // 비밀번호 input에서 focus out 할 때, -// 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” -// 에러 메세지를 보입니다. +// 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다. // 비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, // 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않습니다..” // 에러 메세지를 보입니다. +const pwInput = document.querySelector('#password'); +const pwcheckInput = document.querySelector('#password-check'); function validatePassword() { if (pwInput.value === '') { @@ -82,5 +80,30 @@ pwcheckInput.addEventListener('input', validatePasswordMatch) // input 에 빈 값이 있거나 에러 메세지가 있으면 ‘회원가입’ 버튼은 비활성화 됩니다. // Input 에 유효한 값을 입력하면 ‘회원가입' 버튼이 활성화 됩니다. -// 활성화된 ‘회원가입’ 버튼을 누르면 로그인 페이지로 이동합니다 +const allInput = document.querySelectorAll('input'); +const signupBtn = document.querySelector('#signup-btn'); + +function checkAllValid() { + let isValid = true; + + allInput.forEach((input) => { + const errorText = input.parentElement.querySelector('.error-message').textContent; + if (input.value ==='' || errorText !== '') { + isValid = false; + } + }); + signupBtn.disabled = !isValid; +} + +allInput.forEach((input) => { + input.addEventListener('input', checkAllValid); + input.addEventListener('focusout', checkAllValid); +}); + +// 활성화된 ‘회원가입’ 버튼을 누르면 로그인 페이지로 이동합니다 +signupBtn.addEventListener('click', () => { + if (!signupBtn.disabled) { + window.location.href = '/login'; + } +}); diff --git a/login-page.html b/login-page.html index b421dfd3..0b29e25e 100644 --- a/login-page.html +++ b/login-page.html @@ -30,6 +30,7 @@ placeholder="이메일을 입력해주세요" required /> +
- +