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

  

  

    
Create Account
  
  

    

      Username
      
      
      Error message
    
    

      Email
      
      
      Error message
    
    

      Password
      
      
      Error message
    
    

      Confirm Password
      
      
      Error message
    
    Submit
  


  

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.

The post Html Form Validation using JavaScript Source Code appeared first on DotNetTec.