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 = /^(([^<>()\[\]\\.,;:\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,}))$/;
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
