JavaScript Form Validation

Form validation is an essential part of every website and application. Whether you’re collecting user data for signups, logins, or surveys, ensuring valid and secure input is a must. In this tutorial, you’ll learn how to create a clean and modern signup form with real-time validation using pure HTML, CSS, and JavaScript.

What We’ll Learn

How to build a structured and accessible form
How to style input fields with success and error states
How to validate fields like email, password, and confirmation
How to handle form submission and prevent invalid data

HTML: Building the Form Structure

The form includes four fields: username, email, password, and password confirmation. Each input is wrapped in a .input-box div for better layout control. An error message box is also placed under each input to display validation feedback.

<div class="container">
 <form id="form" action="/">
  <h1>Signup Form</h1>
  <div class="input-box">
   <label for="username">Username</label>
   <input id="username" name="username" type="text">
   <div class="error"></div>
  </div>
  <div class="input-box">
   <label for="email">Email</label>
   <input id="email" name="email" type="text">
   <div class="error"></div>
  </div>
  <div class="input-box">
   <label for="password">Password</label>
   <input id="password" name="password" type="password">
   <div class="error"></div>
  </div>
  <div class="input-box">
   <label for="password2">Password again</label>
   <input id="password2" name="password2" type="password">
   <div class="error"></div>
  </div>
  <button type="submit">Sign Up</button>
 </form>
</div>

CSS: Styling the Form

The CSS ensures the form looks clean, centered, and visually communicates validation states. Green borders indicate success, while red borders indicate errors. Error messages are styled clearly beneath the inputs.

body {
 background: #333333;
 font-family: 'Poppins', sans-serif;
}
#form {
 width: 300px;
 margin: 20vh auto 0 auto;
 padding: 20px;
 background-color: whitesmoke;
 border-radius: 4px;
 font-size: 12px;
}
#form h1 {
 color: #333333;
 text-align: center;
}
#form button {
 padding: 15px;
 margin-top: 10px;
 width: 100%;
 color: white;
 background-color: #ff4d00;
 border: none;
 border-radius: 4px;
 cursor: pointer;
}
.input-box {
 display: flex;
 flex-direction: column;
}
.input-box input {
 border: 2px solid #666666;
 border-radius: 4px;
 display: block;
 font-size: 12px;
 padding: 15px;
 width: 100%;
}
.input-box input:focus {
 outline: 0;
}
.input-box.success input {
 border-color: #09c372;
}
.input-box.error input {
 border-color: #ff3860;
}
.input-box .error {
 color: #ff3860;
 font-size: 9px;
 height: 13px;
}

JavaScript: Validating the Form

The JavaScript handles real-time validation when the form is submitted. It checks for:

Required fields
Proper email format using regular expressions
Minimum password length
Matching passwords

// get all input elements by their id
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

// add event listener to the form
form.addEventListener('submit', e => {
 e.preventDefault();
 validateInputs();
});

const setError = (element, message) => {
 const inputControl = element.parentElement;
 const errorDisplay = inputControl.querySelector('.error');

 errorDisplay.innerText = message;
 inputControl.classList.add('error');
 inputControl.classList.remove('success')
}

const setSuccess = element => {
 const inputControl = element.parentElement;
 const errorDisplay = inputControl.querySelector('.error');

 errorDisplay.innerText = '';
 inputControl.classList.add('success');
 inputControl.classList.remove('error');
};

const isValidEmail = email => {
 // we use regular impression to check the email
 const re = /^(([^<>()[\]\.,;:\s@"]+(\.[^<>()[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 return re.test(String(email).toLowerCase());
}

const validateInputs = () => {
 // we get the values of all input fields

 const usernameValue = username.value.trim();
 const emailValue = email.value.trim();
 const passwordValue = password.value.trim();
 const password2Value = password2.value.trim();

 // Now we add validation condition for each value

 if (usernameValue === '') {
  setError(username, 'Username is required');
 } else {
  setSuccess(username);
 }

 if (emailValue === '') {
  setError(email, 'Email is required');
 } else if (!isValidEmail(emailValue)) {
  setError(email, 'Provide a valid email address');
 } else {
  setSuccess(email);
 }

 if (passwordValue === '') {
  setError(password, 'Password is required');
 } else if (passwordValue.length < 8) {
  setError(password, 'Password must be at least 8 character.')
 } else {
  setSuccess(password);
 }

 if (password2Value === '') {
  setError(password2, 'Please confirm your password');
 } else if (password2Value !== passwordValue) {
  setError(password2, "Passwords doesn't match");
 } else {
  setSuccess(password2);
 }

};

Conclusion

You now have a fully functional and responsive signup form with real-time validation using JavaScript, CSS, and semantic HTML. This form is ideal for login pages, registration forms, or any user input system where validation is important.

What’s Next?

Here are a few ideas to enhance your form:

Add password strength meter
Integrate with a backend API
Show success messages after submission
Use localStorage to temporarily save input

This form can easily be expanded or customized to match your website’s design and functionality. It’s fast, clean, and avoids unnecessary dependencies. A great tool for modern frontend development.

Watch Video on YouTube

Form Validation using HTML, CSS & JavaScript

Download The Source File

Get immediate access to the original source file with a simple click, and start customizing it to fit your needs.

Learning Axis

youtube.com/@learning-axis

HTML

CSS

// get all input elements by their id
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

// add event listener to the form
form.addEventListener('submit', e => {
 e.preventDefault();
 validateInputs();
});

const setError = (element, message) => {
 const inputControl = element.parentElement;
 const errorDisplay = inputControl.querySelector('.error');

errorDisplay.innerText = message;
 inputControl.classList.add('error');
 inputControl.classList.remove('success')
}

const setSuccess = element => {
 const inputControl = element.parentElement;
 const errorDisplay = inputControl.querySelector('.error');

errorDisplay.innerText = '';
 inputControl.classList.add('success');
 inputControl.classList.remove('error');
};

const validateInputs = () => {
 // we get the values of all input fields

const usernameValue = username.value.trim();
 const emailValue = email.value.trim();
 const passwordValue = password.value.trim();
 const password2Value = password2.value.trim();

// Now we add validation condition for each value

if (usernameValue === '') {
  setError(username, 'Username is required');
 } else {
  setSuccess(username);
 }

if (emailValue === '') {
  setError(email, 'Email is required');
 } else if (!isValidEmail(emailValue)) {
  setError(email, 'Provide a valid email address');
 } else {
  setSuccess(email);
 }

if (passwordValue === '') {
  setError(password, 'Password is required');
 } else if (passwordValue.length < 8) {
  setError(password, 'Password must be at least 8 character.')
 } else {
  setSuccess(password);
 }

if (password2Value === '') {
  setError(password2, 'Please confirm your password');
 } else if (password2Value !== passwordValue) {
  setError(password2, "Passwords doesn't match");
 } else {
  setSuccess(password2);
 }

};

Projects

Web Integrations