Build a Contact Form with Real-Time Validation in JavaScript (Step-by-Step Guide)

Introduction

Forms are everywhere on the web—from login pages to contact sections. But what makes a form truly user-friendly is real-time validation.

Instead of showing errors only after submission, modern applications validate inputs instantly—guiding users as they type. In this tutorial, you’ll learn how to build a responsive contact form with live validation, including email format checking and dynamic error handling.

What You’ll Learn

1. Create a clean contact form using HTML
2. Style it with modern CSS
3. Add real-time validation using JavaScript
4. Validate email format properly
5. Improve user experience with instant feedback

Step 1: HTML Structure

<form id="contactForm">
      <h2>Contact Us</h2>

      <input type="text" id="userName" placeholder="User Name" />
      <small id="usernameError" class="error"></small>

      <input type="email" id="userEmail" placeholder="Email" />
      <small id="useremailError" class="error"></small>

       <textarea id="message" placeholder="Your Message"></textarea>
       <small id="messageError" class="error"></small>

       <button type="submit">Send Message</button>
       <p id="successMsg"></p>
 </form>

Step 2: Styling with CSS

form {
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
}

button {
  width: 100%;
  padding: 10px;
  background: #4facfe;
  color: white;
  border: none;
  cursor: pointer;
}

.error {
  color: red;
  font-size: 12px;
}

#successMsg {
  color: green;
  text-align: center;
}

Step 3: Real-Time Validation with JavaScript

const form = document.getElementById("contactForm");

const usernameInput = document.getElementById("userName");
const useremailInput = document.getElementById("userEmail");
const messageInput = document.getElementById("message");

const usernameError = document.getElementById("usernameError");
const useremailError = document.getElementById("useremailError");
const messageError = document.getElementById("messageError");
const successMsg = document.getElementById("successMsg");

const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

// Real-time validation
usernameInput.addEventListener("input", () => {
  usernameError.innerText = usernameInput.value.trim() === "" ? "Name is required" : "";
});

useremailInput.addEventListener("input", () => {
  const email = useremailInput.value.trim();

  if (email === "") {
    useremailError.innerText = "Email is required";
  } else if (!emailPattern.test(email)) {
    useremailError.innerText = "Enter a valid email";
  } else {
    useremailError.innerText = "";
  }
});

messageInput.addEventListener("input", () => {
  messageError.innerText = messageInput.value.trim() === "" ? "Message is required" : "";
});

// Submit validation
form.addEventListener("submit", function (e) {
  e.preventDefault();

  let isValid = true;
  successMsg.innerText = "";

  if (usernameInput.value.trim() === "") {
    usernameError.innerText = "Name is required";
    isValid = false;
  }

  if (useremailInput.value.trim() === "") {
    useremailError.innerText = "Email is required";
    isValid = false;
  } else if (!emailPattern.test(useremailInput.value.trim())) {
    useremailError.innerText = "Enter a valid email";
    isValid = false;
  }

  if (messageInput.value.trim() === "") {
    messageError.innerText = "Message is required";
    isValid = false;
  }

  if (isValid) {
    successMsg.innerText = "Message sent successfully!";
    form.reset();
  }
});

Output: Without Validation

Output: With Validation

Output: Not valid email

Output: Form submitted successfully

Output: Responsive mode

How It Works

1. When a field is empty → error message appears
2. As the user types → error disappears instantly
3. Invalid email → shows “Enter a valid email”
4. Valid input → allows submission

Conclusion

Building a contact form with real-time validation is a great beginner project that teaches you how JavaScript interacts with the DOM. It also gives you a strong foundation for creating more advanced applications.