[#41] feat: validate error 메시지 tooltip으로 추가

src/main/resources/templates/signup.html

@@ -78,27 +78,32 @@ <h5 style="margin: 20px 0 0 40px;">친구들의 사진을 보려면 가입하세
                                 <form id="signup-form" action="/members" method="post" class="form-horizontal mrg-top-40">
                                     <div class="form-group row">
                                         <div class="col-md-12">
-                                            <input type="email" name="email" class="form-control" id="form-1-1" placeholder="이메일" required>
+                                            <input type="email" name="email" class="form-control" id="signup-form-email" placeholder="이메일" required>
                                         </div>
                                     </div>
                                     <div class="form-group row">
                                         <div class="col-md-12">
-                                            <input type="password" name="password" class="form-control" id="form-1-2" placeholder="비밀번호" required pattern=".*(?=^.{8,}$)(?=.*\\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*">
+                                            <input type="password" name="password" class="form-control" id="signup-form-password" placeholder="비밀번호" required pattern=".*(?=^.{8,}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*">
                                         </div>
                                     </div>
                                     <div class="form-group row">
                                         <div class="col-md-12">
-                                            <input type="text" name="nickName" class="form-control" id="form-1-3" placeholder="사용자 닉네임" required pattern="[A-Za-zㄱ-ㅎㅏ-ㅣ가-힣]{2,10}">
+                                            <input type="password" class="form-control" id="signup-form-password-confirm" placeholder="비밀번호 확인">
                                         </div>
                                     </div>
                                     <div class="form-group row">
                                         <div class="col-md-12">
-                                            <input type="text" name="name" class="form-control" id="form-1-4" placeholder="이름" required pattern="[A-Za-zㄱ-ㅎㅏ-ㅣ가-힣]{2,10}">
+                                            <input type="text" name="nickName" class="form-control" id="signup-form-nick-name" placeholder="사용자 닉네임" required pattern="[A-Za-zㄱ-ㅎㅏ-ㅣ가-힣]{2,10}">
+                                        </div>
+                                    </div>
+                                    <div class="form-group row">
+                                        <div class="col-md-12">
+                                            <input type="text" name="name" class="form-control" id="signup-form-name" placeholder="이름" required pattern="[A-Za-zㄱ-ㅎㅏ-ㅣ가-힣]{2,10}">
                                         </div>
                                     </div>
                                     <div class="form-group row" style="margin-bottom: 15px;">
                                         <div class="col-md-12">
-                                            <input type="text" name="profile" class="form-control" id="form-1-5" placeholder="프로필 사진 URL">
+                                            <input type="text" name="profile" class="form-control" id="signup-form-profile" placeholder="프로필 사진 URL">
                                         </div>
                                     </div>
                                     <button type="submit" class="btn-inverse btn-primary btn-sm" style="width: 308px; height: 30px; font-size: 12px; padding: 0;">가입하기</button>
@@ -127,7 +132,57 @@ <h5 style="margin: 20px 0 0 40px;">친구들의 사진을 보려면 가입하세
 <script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>
 <script>
+
+    const form = document.querySelector("#signup-from");
+    const email = document.querySelector("#signup-form-email");
+    const password = document.querySelector("#signup-form-password");
+    const passwordConfirm = document.querySelector("#signup-form-password-confirm");
+    const nickName = document.querySelector("#signup-form-nick-name");
+    const name = document.querySelector("#signup-form-name");
+    const profile = document.querySelector("#signup-form-profile");
+
+    function setCustomValidityMessage(el, message) {
+        if (el.validity.valueMissing || el.validity.patternMismatch) {
+            el.setCustomValidity(message);
+            return;
+        }
+        el.setCustomValidity('');
+    }
+
+    email.addEventListener("input", function (event) {
+        setCustomValidityMessage(email, "올바른 이메일 주소를 입력해 주세요.");
+    });
 
+    password.addEventListener("input", function (event) {
+        setCustomValidityMessage(password, "알파벳 소문자, 대문자, 특수문자를 모두 포함하여 8자리 이상으로 작성해 주세요.");
+    });
+
+    nickName.addEventListener("input", function (event) {
+        setCustomValidityMessage(nickName, "닉네임은 2~10자 사이로 입력해 주세요.");
+    });
+
+    name.addEventListener("input", function (event) {
+        setCustomValidityMessage(name, "이름은 2~10자 사이로 입력해 주세요.");
+    });
+
+    function checkPassword() {
+        if (password.value !== passwordConfirm.value) {
+            passwordConfirm.setCustomValidity('비밀번호가 일치하지 않습니다.');
+            return;
+        }
+        passwordConfirm.setCustomValidity('');
+    }
+
+    password.onchange = checkPassword;
+    passwordConfirm.onkeyup = checkPassword;
+
+    form.addEventListener("submit", function () {
+        setCustomValidityMessage(email, "올바른 이메일 주소를 입력해 주세요.");
+        setCustomValidityMessage(password, "알파벳 소문자, 대문자, 특수문자를 모두 포함하여 8자리 이상으로 작성해 주세요.");
+        setCustomValidityMessage(nickName, "닉네임은 2~10자 사이로 입력해 주세요.");
+        setCustomValidityMessage(name, "이름은 2~10자 사이로 입력해 주세요.");
+    })
+
 </script>
 </body>
 </html>