Form, JavaScript, Login Form

Html login form validation using javascript with code

Today we will create an Html login form validation along with Javascript libraries of validation. In the last lecture, we created a Footer design in Html But now we are focusing on form validation.

As you can see in the image we have a beautiful login form. It has all the functionalities of a login form. But without filling in all the details of this page you can not move further. For that, we have used JS validation in our form. After pressing the login button, it will show an error and ask you to fill in the empty field.

Form validation

If you fill the fields properly then it will work otherwise it will generate an error. If fields will be empty then it will not work due to form validation.

Then it has the text ”Don’t have an account. Register”. This text is for those people who don’t have created their accounts yet.

So we are going to create it using Html, CSS, and js.

You might like it:

For creating it we have to create three main files in our editor or these languages.

Source code of Html

First, start with an Html file. We have to create a file of Html and name it form.html. Copy the below code and paste it into your Html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Form  | FantacyDesign</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="wrapper">
    <header>Login Form</header>
    <form action="#">
      <div class="field email">
        <div class="input-area">
          <input type="text" placeholder="Email Address">
          <i class="icon fas fa-envelope"></i>
          <i class="error error-icon fas fa-exclamation-circle"></i>
        </div>
        <div class="error error-txt">Email can't be blank</div>
      </div>
      <div class="field password">
        <div class="input-area">
          <input type="password" placeholder="Password">
          <i class="icon fas fa-lock"></i>
          <i class="error error-icon fas fa-exclamation-circle"></i>
        </div>
        <div class="error error-txt">Password can't be blank</div>
      </div>
      <div class="pass-txt"><a href="#">Forgot password?</a></div>
      <input type="submit" value="Login">
    </form>
    <div class="sign-txt">Not yet member? <a href="#">Signup now</a></div>
  </div>

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

</body>
</html>

<!DOCTYPE html>

<head>

<title>Login Form | FantacyDesign</title>

</head>

<body>

<header>Login Form</header>

</div>

<div class="error error-txt">Email can't be blank</div>

</div>

</div>

<div class="error error-txt">Password can't be blank</div>

</div>

<div class="pass-txt"><a href="#">Forgot password?</a></div>

</form>

<div class="sign-txt">Not yet member? <a href="#">Signup now</a></div>

</div>

</body>

</html>

Source code of CSS

Then create a file of CSS and save it in the same folder of Html. Name it as form.css and save it. CSS will help the developer to design the form properly like how to and where to place all the content of the form.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00C9A7;
}
::selection{
  color: #fff;
  background: #00C9A7;
}
.wrapper{
  width: 380px;
  padding: 40px 30px 50px 30px;
  background: #fff;
  border-radius: 5px;
  text-align: center;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.53) 0px 3px 15px;
}
.wrapper header{
  font-size: 35px;
  font-weight: 600;
  color: #00C9A7;
}
.wrapper form{
  margin: 40px 0;
}
form .field{
  width: 100%;
  margin-bottom: 20px;
}
form .field.shake{
  animation: shake 0.3s ease-in-out;
}
@keyframes shake {
  0%, 100%{
    margin-left: 0px;
  }
  20%, 80%{
    margin-left: -12px;
  }
  40%, 60%{
    margin-left: 12px;
  }
}
form .field .input-area{
  height: 50px;
  width: 100%;
  position: relative;
}
form input{
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 45px;
  font-size: 18px;
  background: none;
  caret-color: #00C9A7;
  border-radius: 5px;
  border: 1px solid #bfbfbf;
  border-bottom-width: 2px;
  transition: all 0.2s ease;
}
form .field input:focus,
form .field.valid input{
  border-color: #00C9A7;
}
form .field.shake input,
form .field.error input{
  border-color: #dc3545;
}
.field .input-area i{
  position: absolute;
  top: 50%;
  font-size: 18px;
  pointer-events: none;
  transform: translateY(-50%);
}
.input-area .icon{
  left: 15px;
  color: #bfbfbf;
  transition: color 0.2s ease;
}
.input-area .error-icon{
  right: 15px;
  color: #dc3545;
}
form input:focus ~ .icon,
form .field.valid .icon{
  color: #00C9A7;
}
form .field.shake input:focus ~ .icon,
form .field.error input:focus ~ .icon{
  color: #bfbfbf;
}
form input::placeholder{
  color: #bfbfbf;
  font-size: 17px;
}
form .field .error-txt{
  color: #dc3545;
  text-align: left;
  margin-top: 5px;
}
form .field .error{
  display: none;
}
form .field.shake .error,
form .field.error .error{
  display: block;
}
form .pass-txt{
  text-align: left;
  margin-top: -10px;
}
.wrapper a{
  color: #00C9A7;
  text-decoration: none;
}
.wrapper a:hover{
  text-decoration: underline;
}
form input[type="submit"]{
  height: 50px;
  margin-top: 30px;
  color: #fff;
  padding: 0;
  border: none;
  background: #00C9A7;
  cursor: pointer;
  border-bottom: 2px solid rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
form input[type="submit"]:hover{
  background: #21D4B6;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Poppins", sans-serif;

}

body{

width: 100%;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: #00C9A7;

}

::selection{

color: #fff;

background: #00C9A7;

}

.wrapper{

width: 380px;

padding: 40px 30px 50px 30px;

background: #fff;

border-radius: 5px;

text-align: center;

box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.53) 0px 3px 15px;

}

.wrapper header{

font-size: 35px;

font-weight: 600;

color: #00C9A7;

}

.wrapper form{

margin: 40px 0;

}

form .field{

width: 100%;

margin-bottom: 20px;

}

form .field.shake{

animation: shake 0.3s ease-in-out;

}

@keyframes shake {

0%, 100%{

margin-left: 0px;

}

20%, 80%{

margin-left: -12px;

}

40%, 60%{

margin-left: 12px;

}

form .field .input-area{

height: 50px;

width: 100%;

position: relative;

}

form input{

width: 100%;

height: 100%;

outline: none;

padding: 0 45px;

font-size: 18px;

background: none;

caret-color: #00C9A7;

border-radius: 5px;

border: 1px solid #bfbfbf;

border-bottom-width: 2px;

transition: all 0.2s ease;

}

form .field input:focus,

form .field.valid input{

border-color: #00C9A7;

}

form .field.shake input,

form .field.error input{

border-color: #dc3545;

}

.field .input-area i{

position: absolute;

top: 50%;

font-size: 18px;

pointer-events: none;

transform: translateY(-50%);

}

.input-area .icon{

left: 15px;

color: #bfbfbf;

transition: color 0.2s ease;

}

.input-area .error-icon{

right: 15px;

color: #dc3545;

}

form input:focus ~ .icon,

form .field.valid .icon{

color: #00C9A7;

}

form .field.shake input:focus ~ .icon,

form .field.error input:focus ~ .icon{

color: #bfbfbf;

}

form input::placeholder{

color: #bfbfbf;

font-size: 17px;

}

form .field .error-txt{

color: #dc3545;

text-align: left;

margin-top: 5px;

}

form .field .error{

display: none;

}

form .field.shake .error,

form .field.error .error{

display: block;

}

form .pass-txt{

text-align: left;

margin-top: -10px;

}

.wrapper a{

color: #00C9A7;

text-decoration: none;

}

.wrapper a:hover{

text-decoration: underline;

}

form input[type="submit"]{

height: 50px;

margin-top: 30px;

color: #fff;

padding: 0;

border: none;

background: #00C9A7;

cursor: pointer;

border-bottom: 2px solid rgba(0,0,0,0.1);

transition: all 0.3s ease;

}

form input[type="submit"]:hover{

background: #21D4B6;

}

Source code of javascript

Again create javascript. It is used for adding validation to our form. It is also used in the login button using the on-click property. Copy and paste this code.

const form = document.querySelector("form");
eField = form.querySelector(".email"),
eInput = eField.querySelector("input"),
pField = form.querySelector(".password"),
pInput = pField.querySelector("input");

form.onsubmit = (e)=>{
  e.preventDefault(); //preventing from form submitting
  //if email and password is blank then add shake class in it else call specified function
  (eInput.value == "") ? eField.classList.add("shake", "error") : checkEmail();
  (pInput.value == "") ? pField.classList.add("shake", "error") : checkPass();

  setTimeout(()=>{ //remove shake class after 500ms
    eField.classList.remove("shake");
    pField.classList.remove("shake");
  }, 500);

  eInput.onkeyup = ()=>{checkEmail();} //calling checkEmail function on email input keyup
  pInput.onkeyup = ()=>{checkPass();} //calling checkPassword function on pass input keyup

  function checkEmail(){ //checkEmail function
    let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/; //pattern for validate email
    if(!eInput.value.match(pattern)){ //if pattern not matched then add error and remove valid class
      eField.classList.add("error");
      eField.classList.remove("valid");
      let errorTxt = eField.querySelector(".error-txt");
      //if email value is not empty then show please enter valid email else show Email can't be blank
      (eInput.value != "") ? errorTxt.innerText = "Enter a valid email address" : errorTxt.innerText = "Email can't be blank";
    }else{ //if pattern matched then remove error and add valid class
      eField.classList.remove("error");
      eField.classList.add("valid");
    }
  }

  function checkPass(){ //checkPass function
    if(pInput.value == ""){ //if pass is empty then add error and remove valid class
      pField.classList.add("error");
      pField.classList.remove("valid");
    }else{ //if pass is empty then remove error and add valid class
      pField.classList.remove("error");
      pField.classList.add("valid");
    }
  }

  //if eField and pField doesn't contains error class that mean user filled details properly
  if(!eField.classList.contains("error") && !pField.classList.contains("error")){
    window.location.href = form.getAttribute("action"); //redirecting user to the specified url which is inside action attribute of form tag
  }
}

const form = document.querySelector("form");

eField = form.querySelector(".email"),

eInput = eField.querySelector("input"),

pField = form.querySelector(".password"),

pInput = pField.querySelector("input");

form.onsubmit = (e)=>{

e.preventDefault(); //preventing from form submitting

//if email and password is blank then add shake class in it else call specified function

(eInput.value == "") ? eField.classList.add("shake", "error") : checkEmail();

(pInput.value == "") ? pField.classList.add("shake", "error") : checkPass();

setTimeout(()=>{ //remove shake class after 500ms

eField.classList.remove("shake");

pField.classList.remove("shake");

}, 500);

eInput.onkeyup = ()=>{checkEmail();} //calling checkEmail function on email input keyup

pInput.onkeyup = ()=>{checkPass();} //calling checkPassword function on pass input keyup

function checkEmail(){ //checkEmail function

let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/; //pattern for validate email

if(!eInput.value.match(pattern)){ //if pattern not matched then add error and remove valid class

eField.classList.add("error");

eField.classList.remove("valid");

let errorTxt = eField.querySelector(".error-txt");

//if email value is not empty then show please enter valid email else show Email can't be blank

(eInput.value != "") ? errorTxt.innerText = "Enter a valid email address" : errorTxt.innerText = "Email can't be blank";

}else{ //if pattern matched then remove error and add valid class

eField.classList.remove("error");

eField.classList.add("valid");

}

function checkPass(){ //checkPass function

if(pInput.value == ""){ //if pass is empty then add error and remove valid class

pField.classList.add("error");

pField.classList.remove("valid");

}else{ //if pass is empty then remove error and add valid class

pField.classList.remove("error");

pField.classList.add("valid");

}

//if eField and pField doesn't contains error class that mean user filled details properly

if(!eField.classList.contains("error") && !pField.classList.contains("error")){

window.location.href = form.getAttribute("action"); //redirecting user to the specified url which is inside action attribute of form tag

}

In this way, you can create your form with validation in Html and js if you have followed all the steps.

We have created a file that contains all the necessary files which are used in it. Download it and extract all the files. Then run the Html file and you will see your output in your browser.

Task:

We have created a login form with validation features. Now your task is to create a signup page. On the sign-up page, you have to use 4-5 input fields. These fields must have the feature of validation. Without putting the date in any field it must not allow the users to proceed further. Change the heading of the login to sign up.

If you find this post helpful then must comment below. Also, don’t forget to subscribe to us.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download