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.
Html login 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:
How to create a login validation form?
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>
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;
}
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
}
}
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.
[su_divider divider_color=”#1dbf73″ link_color=”#ffffff”]
[su_button url=”https://mega.nz/file/YtlkGYaK#7-2RXV14MWfwlISI-lzFoVEnTrKRWuN0Gh4qgBMP82E” target=”blank” style=”3d” background=”#1DBF73″ size=”6″ desc=”Click to Download” id=”download”]Download Source Code[/su_button]
