Html Form Validation using JavaScript Source Code

In this blog post, I will share how to create html form validation using javascript code. JavaScript provides the facility to validate the form on the client-side so data processing. Most of the web developers prefer JavaScript validation.

Using JavaScript, you can validate name, password, email, date, mobile numbers and more fields. Keep reading on Simple jQuery Form Validation Example, How to make comment box in Html and CSS

Html Form Validation using JavaScript Code

The following example will demonstrate how to validate username, email, and password. They can’t be empty. Here, we are validating the form on form submit. The user will not be forwarded to the next page until the given values are correct.

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>JavaScript Form Validation</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <div class="header">
    <h2>Create Account</h2>
  </div>
  <form id="form" class="form">
    <div class="form-control">
      <label for="username">Username</label>
      <input type="text" placeholder="dotnettec" id="username" />
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error message</small>
    </div>
    <div class="form-control">
      <label for="username">Email</label>
      <input type="email" placeholder="info@dotnettec.com" id="email" />
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error message</small>
    </div>
    <div class="form-control">
      <label for="username">Password</label>
      <input type="password" placeholder="Password" id="password"/>
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error message</small>
    </div>
    <div class="form-control">
      <label for="username">Confirm Password</label>
      <input type="password" placeholder="Confirm Password" id="password2"/>
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error message</small>
    </div>
    <button>Submit</button>
  </form>
</div>

  <script  src="./script.js"></script>

</body>
</html>

Script.js

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');

form.addEventListener('submit', e => {
    e.preventDefault();

    checkInputs();
});

function checkInputs() {
    // trim to remove the whitespaces
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();

    if (usernameValue === '') {
        setErrorFor(username, 'Username cannot be blank');
    } else {
        setSuccessFor(username);
    }

    if (emailValue === '') {
        setErrorFor(email, 'Email cannot be blank');
    } else if (!isEmail(emailValue)) {
        setErrorFor(email, 'Not a valid email');
    } else {
        setSuccessFor(email);
    }

    if (passwordValue === '') {
        setErrorFor(password, 'Password cannot be blank');
    } else {
        setSuccessFor(password);
    }

    if (password2Value === '') {
        setErrorFor(password2, 'Confirm password cannot be blank');
    } else if (passwordValue !== password2Value) {
        setErrorFor(password2, 'Passwords does not match');
    } else {
        setSuccessFor(password2);
    }
}

function setErrorFor(input, message) {
    const formControl = input.parentElement;
    const small = formControl.querySelector('small');
    formControl.className = 'form-control error';
    small.innerText = message;
}

function setSuccessFor(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
}

function isEmail(email) {
    return /^(([^<>()\[\]\\.,;:\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,}))$/.test(email);
}

Download Source Code

Conclusion

I hope you liked this article on validation in javascript for registration form. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.