diff --git a/images/btn_visibility_on.png b/images/btn_visibility_on.png
new file mode 100644
index 000000000..32765f0b2
Binary files /dev/null and b/images/btn_visibility_on.png differ
diff --git a/pages/signin/index.html b/pages/signin/index.html
index 1d1d74bcf..1037abdba 100644
--- a/pages/signin/index.html
+++ b/pages/signin/index.html
@@ -13,7 +13,7 @@
       <a href="/"><img src="/images/logo_l.png" alt="logo_l" id="logo_l" /></a>
       <div id="inner_container">
         <!-- 로그인 기능이 구현되지 않았으므로 홈으로 돌아가는 링크 설정 -->
-        <form action="/">
+        <form action="/pages/items/">
           <label for="email">이메일</label>
           <input
             type="email"
@@ -22,6 +22,12 @@
             placeholder="이메일을 입력해주세요"
             required
           />
+          <p id="emailEmptyMessage" class="error_message hidden">
+            이메일을 입력해주세요
+          </p>
+          <p id="emailInvalidMessage" class="error_message hidden">
+            잘못된 이메일 형식입니다
+          </p>
           <div class="pwd_container">
             <label for="pwd">비밀번호</label>
             <input
@@ -31,9 +37,25 @@
               placeholder="비밀번호를 입력해주세요"
               required
             />
-            <img src="/images/btn_visibility.png" alt="controlpwd" />
+            <button
+              class="controlpwd"
+              type="button"
+              onclick="signinFormValidation.togglePasswordVisibility()"
+            >
+              <img
+                id="pwdimg"
+                src="/images/btn_visibility.png"
+                alt="controlpwd"
+              />
+            </button>
           </div>
-          <button type="submit">로그인</button>
+          <p id="passwordEmptyMessage" class="error_message hidden">
+            비밀번호를 입력해주세요
+          </p>
+          <p id="passwordInvalidMessage" class="error_message hidden">
+            비밀번호를 8자 이상 입력해주세요
+          </p>
+          <button id="submitBtn" type="submit" disabled>로그인</button>
         </form>
         <div id="sns_container">
           간편 로그인하기
@@ -52,5 +74,6 @@
         </div>
       </div>
     </div>
+    <script src="/scripts/auth/val-signin-text.js"></script>
   </body>
 </html>
diff --git a/pages/signup/index.html b/pages/signup/index.html
index a8ccb777c..971e3af18 100644
--- a/pages/signup/index.html
+++ b/pages/signup/index.html
@@ -13,7 +13,7 @@
       <a href="/"><img src="/images/logo_l.png" alt="logo_l" id="logo_l" /></a>
       <div id="inner_container">
         <!-- 로그인 기능이 구현되지 않았으므로 홈으로 돌아가는 링크 설정 -->
-        <form action="/">
+        <form action="/pages/signin/">
           <label for="email">이메일</label>
           <input
             type="email"
@@ -22,6 +22,12 @@
             placeholder="이메일을 입력해주세요"
             required
           />
+          <p id="emailEmptyMessage" class="error_message hidden">
+            이메일을 입력해주세요
+          </p>
+          <p id="emailInvalidMessage" class="error_message hidden">
+            잘못된 이메일 형식입니다
+          </p>
           <label for="nickname">닉네임</label>
           <input
             type="text"
@@ -30,6 +36,9 @@
             placeholder="닉네임을 입력해주세요"
             required
           />
+          <p id="nicknameEmptyMessage" class="error_message hidden">
+            닉네임을 입력해주세요
+          </p>
           <div class="pwd_container">
             <label for="pwd">비밀번호</label>
             <input
@@ -39,8 +48,24 @@
               placeholder="비밀번호를 입력해주세요"
               required
             />
-            <img src="/images/btn_visibility.png" alt="controlpwd" />
+            <button
+              class="controlpwd"
+              type="button"
+              onclick="signupFormValidation.togglePasswordVisibility()"
+            >
+              <img
+                id="pwdimg"
+                src="/images/btn_visibility.png"
+                alt="controlpwd"
+              />
+            </button>
           </div>
+          <p id="passwordEmptyMessage" class="error_message hidden">
+            비밀번호를 입력해주세요
+          </p>
+          <p id="passwordInvalidMessage" class="error_message hidden">
+            비밀번호를 8자 이상 입력해주세요
+          </p>
           <div class="pwd_container">
             <label for="pwdchk">비밀번호 확인</label>
             <input
@@ -50,9 +75,22 @@
               placeholder="비밀번호를 다시 한 번 입력해주세요"
               required
             />
-            <img src="/images/btn_visibility.png" alt="controlpwd" />
+            <button
+              class="controlpwd"
+              type="button"
+              onclick="signupFormValidation.togglePasswordCheckVisibility()"
+            >
+              <img
+                id="pwdchkimg"
+                src="/images/btn_visibility.png"
+                alt="controlpwdchk"
+              />
+            </button>
           </div>
-          <button type="submit">회원가입</button>
+          <p id="passwordCheckNotMatchMessage" class="error_message hidden">
+            비밀번호가 일치하지 않습니다.
+          </p>
+          <button id="submitBtn" type="submit" disabled>회원가입</button>
         </form>
         <div id="sns_container">
           간편 로그인하기
@@ -71,5 +109,6 @@
         </div>
       </div>
     </div>
+    <script src="/scripts/auth/val-signup-text.js"></script>
   </body>
 </html>
diff --git a/scripts/auth/val-signin-text.js b/scripts/auth/val-signin-text.js
new file mode 100644
index 000000000..fba05c557
--- /dev/null
+++ b/scripts/auth/val-signin-text.js
@@ -0,0 +1,90 @@
+const signinFormValidation = (function () {
+  let isEmailValid = false;
+  let isPasswordValid = false;
+
+  const togglePasswordVisibility = () => {
+    const passwordInput = document.getElementById("pwd");
+    const passwordVisibilityButton = document.getElementById("pwdimg");
+
+    if (passwordInput.type === "password") {
+      passwordInput.type = "text";
+      passwordVisibilityButton.src = "/images/btn_visibility_on.png";
+    } else {
+      passwordInput.type = "password";
+      passwordVisibilityButton.src = "/images/btn_visibility.png";
+    }
+  };
+
+  const validateForm = () => {
+    const submitButton = document.getElementById("submitBtn");
+
+    if (isEmailValid && isPasswordValid) {
+      submitButton.style.backgroundColor = "var(--btn-blue1)";
+      submitButton.disabled = false;
+    } else {
+      submitButton.style.backgroundColor = "var(--cool-gray400)";
+      submitButton.disabled = true;
+    }
+  };
+
+  const validateEmailField = () => {
+    const emailInput = document.getElementById("email");
+    let emailEmptyMessage = document.getElementById("emailEmptyMessage");
+    let emailInvalidMessage = document.getElementById("emailInvalidMessage");
+
+    emailInput.addEventListener("focusout", () => {
+      if (emailInput.value === "") {
+        emailInput.style.outline = "2px solid var(--error-red)";
+        emailInvalidMessage.classList.add("hidden");
+        emailEmptyMessage.classList.remove("hidden");
+        isEmailValid = false;
+      } else if (!emailInput.checkValidity()) {
+        emailInput.style.outline = "2px solid var(--error-red)";
+        emailEmptyMessage.classList.add("hidden");
+        emailInvalidMessage.classList.remove("hidden");
+        isEmailValid = false;
+      } else {
+        emailInput.style.outline = "none";
+        emailEmptyMessage.classList.add("hidden");
+        emailInvalidMessage.classList.add("hidden");
+        isEmailValid = true;
+      }
+      validateForm();
+    });
+  };
+
+  const validatePasswordField = () => {
+    const passwordInput = document.getElementById("pwd");
+    let passwordEmptyMessage = document.getElementById("passwordEmptyMessage");
+    let passwordInvalidMessage = document.getElementById(
+      "passwordInvalidMessage"
+    );
+
+    passwordInput.addEventListener("focusout", () => {
+      if (passwordInput.value === "") {
+        passwordInput.style.outline = "2px solid var(--error-red)";
+        passwordInvalidMessage.classList.add("hidden");
+        passwordEmptyMessage.classList.remove("hidden");
+        isPasswordValid = false;
+      } else if (passwordInput.value.length < 8) {
+        passwordInput.style.outline = "2px solid var(--error-red)";
+        passwordEmptyMessage.classList.add("hidden");
+        passwordInvalidMessage.classList.remove("hidden");
+        isPasswordValid = false;
+      } else {
+        passwordInput.style.outline = "none";
+        passwordEmptyMessage.classList.add("hidden");
+        passwordInvalidMessage.classList.add("hidden");
+        isPasswordValid = true;
+      }
+      validateForm();
+    });
+  };
+
+  validateEmailField();
+  validatePasswordField();
+
+  return {
+    togglePasswordVisibility: togglePasswordVisibility,
+  };
+})();
diff --git a/scripts/auth/val-signup-text.js b/scripts/auth/val-signup-text.js
new file mode 100644
index 000000000..6fb01cecc
--- /dev/null
+++ b/scripts/auth/val-signup-text.js
@@ -0,0 +1,152 @@
+const signupFormValidation = (function () {
+  let isEmailValid = false;
+  let isNicknameValid = false;
+  let isPasswordValid = false;
+  let isPasswordCheckValid = false;
+
+  const togglePasswordVisibility = () => {
+    const passwordInput = document.getElementById("pwd");
+    const passwordVisibilityButton = document.getElementById("pwdimg");
+
+    if (passwordInput.type === "password") {
+      passwordInput.type = "text";
+      passwordVisibilityButton.src = "/images/btn_visibility_on.png";
+    } else {
+      passwordInput.type = "password";
+      passwordVisibilityButton.src = "/images/btn_visibility.png";
+    }
+  };
+
+  const togglePasswordCheckVisibility = () => {
+    const passwordCheckInput = document.getElementById("pwdchk");
+    const passwordVisibilityButton = document.getElementById("pwdchkimg");
+
+    if (passwordCheckInput.type === "password") {
+      passwordCheckInput.type = "text";
+      passwordVisibilityButton.src = "/images/btn_visibility_on.png";
+    } else {
+      passwordCheckInput.type = "password";
+      passwordVisibilityButton.src = "/images/btn_visibility.png";
+    }
+  };
+
+  const validateForm = () => {
+    const submitButton = document.getElementById("submitBtn");
+
+    if (
+      isEmailValid &&
+      isNicknameValid &&
+      isPasswordValid &&
+      isPasswordCheckValid
+    ) {
+      submitButton.style.backgroundColor = "var(--btn-blue1)";
+      submitButton.disabled = false;
+    } else {
+      submitButton.style.backgroundColor = "var(--cool-gray400)";
+      submitButton.disabled = true;
+    }
+  };
+
+  const validateEmailField = () => {
+    const emailInput = document.getElementById("email");
+    let emailEmptyMessage = document.getElementById("emailEmptyMessage");
+    let emailInvalidMessage = document.getElementById("emailInvalidMessage");
+
+    emailInput.addEventListener("focusout", () => {
+      if (emailInput.value === "") {
+        emailInput.style.outline = "2px solid var(--error-red)";
+        emailInvalidMessage.classList.add("hidden");
+        emailEmptyMessage.classList.remove("hidden");
+        isEmailValid = false;
+      } else if (!emailInput.checkValidity()) {
+        emailInput.style.outline = "2px solid var(--error-red)";
+        emailEmptyMessage.classList.add("hidden");
+        emailInvalidMessage.classList.remove("hidden");
+        isEmailValid = false;
+      } else {
+        emailInput.style.outline = "none";
+        emailEmptyMessage.classList.add("hidden");
+        emailInvalidMessage.classList.add("hidden");
+        isEmailValid = true;
+      }
+      validateForm();
+    });
+  };
+
+  const validateNicknameField = () => {
+    const nickname = document.getElementById("nickname");
+    let nicknameEmptyMessage = document.getElementById("nicknameEmptyMessage");
+
+    nickname.addEventListener("focusout", () => {
+      if (nickname.value === "") {
+        nickname.style.outline = "2px solid var(--error-red)";
+        nicknameEmptyMessage.classList.remove("hidden");
+        isNicknameValid = false;
+      } else {
+        nickname.style.outline = "none";
+        nicknameEmptyMessage.classList.add("hidden");
+        isNicknameValid = true;
+      }
+      validateForm();
+    });
+  };
+
+  const validatePasswordField = () => {
+    const passwordInput = document.getElementById("pwd");
+    let passwordEmptyMessage = document.getElementById("passwordEmptyMessage");
+    let passwordInvalidMessage = document.getElementById(
+      "passwordInvalidMessage"
+    );
+
+    passwordInput.addEventListener("focusout", () => {
+      if (passwordInput.value === "") {
+        passwordInput.style.outline = "2px solid var(--error-red)";
+        passwordInvalidMessage.classList.add("hidden");
+        passwordEmptyMessage.classList.remove("hidden");
+        isPasswordValid = false;
+      } else if (passwordInput.value.length < 8) {
+        passwordInput.style.outline = "2px solid var(--error-red)";
+        passwordEmptyMessage.classList.add("hidden");
+        passwordInvalidMessage.classList.remove("hidden");
+        isPasswordValid = false;
+      } else {
+        passwordInput.style.outline = "none";
+        passwordEmptyMessage.classList.add("hidden");
+        passwordInvalidMessage.classList.add("hidden");
+        isPasswordValid = true;
+      }
+      validateForm();
+    });
+  };
+
+  const validatePasswordCheckField = () => {
+    const passwordInput = document.getElementById("pwd");
+    const passwordCheckInput = document.getElementById("pwdchk");
+    let passwordCheckNotMatchMessage = document.getElementById(
+      "passwordCheckNotMatchMessage"
+    );
+
+    passwordCheckInput.addEventListener("focusout", () => {
+      if (passwordCheckInput.value !== passwordInput.value) {
+        passwordCheckInput.style.outline = "2px solid var(--error-red)";
+        passwordCheckNotMatchMessage.classList.remove("hidden");
+        isPasswordCheckValid = false;
+      } else {
+        passwordCheckInput.style.outline = "none";
+        passwordCheckNotMatchMessage.classList.add("hidden");
+        isPasswordCheckValid = true;
+      }
+      validateForm();
+    });
+  };
+
+  validateEmailField();
+  validateNicknameField();
+  validatePasswordField();
+  validatePasswordCheckField();
+
+  return {
+    togglePasswordVisibility: togglePasswordVisibility,
+    togglePasswordCheckVisibility: togglePasswordCheckVisibility,
+  };
+})();
diff --git a/styles/auth/style.css b/styles/auth/style.css
index 2f54c0032..5e1e49870 100644
--- a/styles/auth/style.css
+++ b/styles/auth/style.css
@@ -55,27 +55,24 @@ form input:focus {
   outline: 2px solid var(--btn-blue1);
 }
 
-form button {
-  height: 56px;
-  border-radius: 40px;
-  border: none;
-  background-color: var(--cool-gray400);
-  color: #ffffff;
-}
-
-form button:hover {
-  background-color: var(--btn-blue1);
-  cursor: pointer;
+.error_message {
+  color: var(--error-red);
+  font-size: 15px;
+  margin-top: -16px;
+  margin-left: 16px;
 }
 
 .pwd_container {
   position: relative;
 }
 
-.pwd_container > img {
+.controlpwd {
   position: absolute;
   top: 53px;
   right: 16px;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
 }
 
 #container {
@@ -94,6 +91,15 @@ form button:hover {
   margin: 40px 0;
 }
 
+#submitBtn {
+  height: 56px;
+  border-radius: 40px;
+  border: none;
+  background-color: var(--cool-gray400);
+  color: #ffffff;
+  cursor: pointer;
+}
+
 #sns_container {
   display: flex;
   justify-content: space-between;
diff --git a/styles/global.css b/styles/global.css
index 4d2960500..bd3fef9ac 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -31,3 +31,7 @@
   font-weight: 400;
   font-style: normal;
 }
+
+.hidden {
+  display: none;
+}