Conversational Form Validation - (HTML + CSS + JS)

by Vijay Pancholi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Conversational Form Validator</title>
</head>
<body>
  <div class="form-box">
    <h2>👋 Hello! Let's get you registered</h2>
    <input type="text" id="name" placeholder="What's your name?" />
    <input type="email" id="email" placeholder="Enter your email" />
    <input type="password" id="password" placeholder="Create a password" />
    <button onclick="validateForm()">Submit</button>
    <div class="chat-box" id="chatResponse">Hi there! Fill the form and I'll talk to you. 😊</div>
  </div>
</body>
</html>

CSS

body {
      font-family: "Segoe UI", sans-serif;
      background: #f2f2f2;
      padding: 50px;
    }

    .form-box {
      max-width: 400px;
      margin: auto;
      background: white;
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
      padding: 30px;
    }

    h2 {
      text-align: center;
    }

    input {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 16px;
    }

    button {
      width: 100%;
      padding: 10px;
      font-size: 18px;
      background: #4caf50;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

    .chat-box {
      margin-top: 20px;
      background: #e9f5ff;
      border-radius: 10px;
      padding: 15px;
      font-size: 14px;
      min-height: 50px;
      transition: all 0.3s;
    }

    .error {
      background: #ffe9e9;
      color: #d60000;
    }

    .success {
      background: #e6ffe9;
      color: #0a8800;
    }

JavaScript

function respond(message, isError = false, isSuccess = false) {
      const chat = document.getElementById("chatResponse");
      chat.textContent = message;
      chat.className = "chat-box";
      if (isError) chat.classList.add("error");
      if (isSuccess) chat.classList.add("success");
    }

    function validateForm() {
      const name = document.getElementById("name").value.trim();
      const email = document.getElementById("email").value.trim();
      const password = document.getElementById("password").value;

      // Name Validation
      if (name.length < 2) {
        respond("Hmm... your name seems too short. Got a longer version? 🤔", true);
        return;
      }

      // Email Validation
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(email)) {
        respond("That email doesn't look right. Maybe a typo? 🧐", true);
        return;
      }

      // Password Validation
      if (password.length < 6) {
        respond("Let's make that password stronger — 6+ characters please 💪", true);
        return;
      }

      if (!/[A-Z]/.test(password)) {
        respond("How about adding one capital letter to your password? 🔠", true);
        return;
      }

      if (!/[0-9]/.test(password)) {
        respond("A number in your password would be nice! 🔢", true);
        return;
      }

      // Success
      respond("🎉 You're all set! Form submitted successfully!", false, true);
    }