[Source Code] Form Validation using Html, Css & Js

 

It is very easy to create a Form using Html and Css. But its takes a bit tough to validate the form using JavaScript. So, first we will design a template using html & css and the we will go for js to validate the form.

You can use these simple code to implement for your project.

Take Down the Html code :

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Contact Form</title>
    <link rel="stylesheet" href="style.css">

  </head>
  <body>
    <div class="container">
      <form class="form" id="form">
        <h2>register with us</h2>

        <div class="form-control">
          <label for="">username</label>
          <input type="text" id="username">
          <small>error message</small>
        </div>
        <div class="form-control">
          <label for="">email</label>
          <input type="email" id="email">
          <small>error message</small>
        </div>
        <div class="form-control">
          <label for="">password</label>
          <input type="password" id="password">
          <small>error message</small>
        </div>
        <div class="form-control">
          <label for="">confirm password</label>
          <input type="password" id="confirmPassword">
          <small>error message</small>
        </div>

        <button type="submit" id="myBtn">submit</button>

      </form>
    </div>
<script src="myjs.js" charset="utf-8"></script>
  </body>
</html>

Css:

body{
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: #f9fafb;
  align-items: center;
  font-family: 'open sans', sans-serif;
}
.container{
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  border-radius: 5px;
  width: 400px
}
.form{
  padding: 30px 40px
}
.form-control{
  padding-bottom: 20px;
  position: relative;
  margin-bottom: 10px
}
.form-control.error input{
  border-color: red
}
.form-control.success input{
  border-color: green;
}
.form-control.error small{
  visibility: inherit;
}
label{
  display: block;
  margin-bottom: 5px;
  text-transform: capitalize;
  color: #777
}
h2{
  text-align: center;
  text-transform: capitalize;
}
input{
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 2px solid #f0f0f0
}
small{
  position: absolute;
  left: 0;
  bottom: 0;
  color: red;
  visibility: hidden;
}
#myBtn{
  background: #3498db;
  width: 100%;
  padding: 10px 0;
  color: white;
  font-size: 16px;
  text-transform: capitalize;
  border: 2px solid #3498db;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript:

const username = document.getElementById('username');
const email   = document.getElementById('email');
const password = document.getElementById('password');
const cPassword = document.getElementById('confirmPassword');

const myBtn = document.getElementById('myBtn');

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

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

function checkRequire(inputArr){
  inputArr.forEach(function(item){
    if(item.value.trim() === ''){
      //alert(item.id+" is empty");
      showError(item, `${getTheId(item)} is empty`);
    }
    else {
      showSuccess(item);
    }
  })
}

function getTheId(item){
  return item.id.charAt(0).toUpperCase() + item.id.slice(1);
}

function emailValidation(input){
  const emailVerify = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[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,}))$/;

  if(emailVerify.test(input.value.trim())){
    //success
  }
  else {
    showError(input, 'Email is not a Valid Email');
  }

}

function matchPass(input1,input2){
  if(input1.value !== input2.value){
    showError(input2,' Password do match');
  }
}

myBtn.addEventListener('click',(e) =>{
  e.preventDefault();
  checkRequire([username,email,password,cPassword]);
  emailValidation(email);
  matchPass(password,cPassword);
})

Take a Help from video

Leave a Reply

Your email address will not be published. Required fields are marked *