Source Code Of Registration Form Validation Check In JavaScript Using HTML, CSS And JavaScript. Learn How To Make Registration Form Validation Check In JavaScript And Get Free Source Code.
Folder Structure
Resources
Prerequisite Sites
Images
Codes
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Source Code Of Form Validation</title>
<!--------------- CSS --------------------->
<link rel="stylesheet" href="style.css">
<!--------------- Font Awesome --------------------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<div class="form_box">
<!--------------- Toggle Buttons For Login & Register Form --------------------->
<div class="btn_box">
<div id="btn"></div>
<button type="button" class="toggle_btn" onclick="login()">Log in</button>
<button type="button" class="toggle_btn" onclick="register()">Register</button>
</div>
<!--------------- Social Icons --------------------->
<div class="social_icons">
<a href=""><i class="fa-brands fa-google icon"></i></a>
<a href=""><i class="fa-brands fa-facebook-f icon"></i></a>
<a href=""><i class="fa-brands fa-twitter icon"></i></a>
</div>
<!--------------- Login Form --------------------->
<form id="login" class="input_group">
<div class="form_div">
<input type="text" class="form_input" placeholder=" " autocomplete="off" required>
<label for="" class="form_label">User Name</label>
</div>
<div class="form_div">
<input type="password" class="form_input" placeholder=" " autocomplete="off" required>
<label for="" class="form_label">Password</label>
</div>
<input type="checkbox" class="checkbox"><span class="check_text">Remember Password</span>
<button type="submit" class="submit_btn">Log in</button>
</form>
<!--------------- End Login Form --------------------->
<!--------------- Register Form --------------------->
<form id="register" class="input_group">
<div class="form_div">
<input type="text" id="user_name_input" name="user_name_input" class="form_input" placeholder=" " autocomplete="off" required>
<label for="user_name_input" class="form_label">User Name</label>
</div>
<span id="user_name_error" class="hide danger-color error-msg">Invalid Input</span>
<span id="user_name_empty" class="hide danger-color error-msg">User Name Can not Be Empty</span>
<div class="form_div">
<input type="email" id="email_input" class="form_input" placeholder=" " autocomplete="off" required>
<label for="email_input" class="form_label">Email</label>
</div>
<span id="email_error" class="hide danger-color error-msg">Invalid Email</span>
<span id="email_empty" class="hide danger-color error-msg">Email Can not Be Empty</span>
<div class="form_div">
<input type="tel" id="phone_input" class="form_input" placeholder=" " autocomplete="off" required>
<label for="phone_input" class="form_label">Phone</label>
</div>
<span id="phone_error" class="hide danger-color error-msg">Phone Number Should Have 10 Digits</span>
<span id="phone_empty" class="hide danger-color error-msg">Phone Can not Be Empty</span>
<div class="form_div">
<input type="password" id="password_input" class="form_input" onkeyup="passwordvalidation(this.value)" placeholder=" " autocomplete="off" required>
<label for="password_input" class="form_label">Password</label>
<!--------------- Password Hide & Show Icon --------------------->
<span class="showbtn"><i id="showbtn" class="fa-solid fa-eye"></i></ion-icon></span>
</div>
<span id="password_error" class="hide danger-color error-msg">Password Should Have Letters, Special Symbols & Numbers</span>
<span id="password_empty" class="hide danger-color error-msg">Password Can not Be Empty</span>
<!--------------- Password Validation --------------------->
<div class="password_validation">
<ul>
<li id="lowChar">At least one lowercase chracter</li>
<li id="upChar">At least one uppercase chracter</li>
<li id="number">At least one number</li>
<li id="speChar">At least one special chracter</li>
<li id="eigChar">At least 8 chracters</li>
</ul>
</div>
<!--------------- End Password Validation --------------------->
<input type="checkbox" class="checkbox"><span class="check_text">I agree to the terms & conditions</span>
<button type="submit" id="submit_btn" class="submit_btn">Register</button>
</form>
<!--------------- End Register Form --------------------->
</div>
<!--------------- Success & Error Popup --------------------->
<div class="popup" id="Valpopup">
<i class="fa-sharp fa-solid fa-check valicon"></i>
<h2>Register Successfully!</h2>
<button class="ok_btn" type="button" onclick="closevalPopup()">OK</button>
</div>
<div class="popup" id="errorpopup">
<i class="fa-solid fa-xmark erroricon"></i>
<h2>Something Wrong</h2>
<button class="ok_btn" type="button" onclick="closeerrorPopup()">OK</button>
</div>
<!--------------- End Success & Error Popup --------------------->
</div>
<!--------------- SCRIPT --------------------->
<script src="script.js"></script>
</body>
</html>CSS
/*----------------- GOOGLE FONTS -----------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;500;600&display=swap');
/*----------------- VARIABLES -----------------*/
:root {
/* Colors */
--orange-color: rgb(246, 99, 53);
--white_color: rgb(255, 255, 255);
--linear_gradient: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4));
--black_color: rgb(0, 0, 0);
--success_color: rgb(138, 232, 90);
--danger_color: rgb(255, 71, 71);
}
html {
font-size: 10px;
/* Now 1rem = 10px */
}
/*----------------- Base -----------------*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
}
/*----------------- Styling Start -----------------*/
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
background-image:var(--linear_gradient),url(background.jpg);
background-position: center;
background-size: cover;
transition: 0.5s ease;
transform-style: preserve-3d;
perspective: 100rem;
}
.form_box {
width: 38rem;
height: 55rem;
margin: 6% auto;
padding: 0.5rem;
color: var(--white_color);
border: 0.1rem solid rgba(255, 255, 255, 0.3);
background:rgba(255, 255, 255, 0.2);
border-radius: 1.6rem;
box-shadow: 0 0.4rem 3rem rgba(0, 0, 0, 0.1);
backdrop-filter: blur(0.5rem);
overflow: hidden;
}
.btn_box {
width: 22rem;
margin: 3.5rem auto;
position: relative;
box-shadow: 0 0 2rem 0.9rem #1b1f2955;
border-radius: 3rem;
}
.toggle_btn {
padding: 1rem 3rem;
cursor: pointer;
background: transparent;
border: 0;
outline: none;
position: relative;
transition: 0.3s;
font-weight: 600;
}
.toggle_btn:hover {
color: var(--white_color);
}
#btn {
top: 0;
left: 0;
position: absolute;
width: 11rem;
height: 100%;
border-radius: 3rem;
background:var(--orange-color);
transition: 0.5s;
font-weight: 600;
}
.social_icons {
text-align: center;
}
.social_icons .icon {
width: 3.6rem;
height: 3.6rem;
margin: 0 1.2rem;
font-size: 1.6rem;
box-shadow: 0 0 2rem 0.9rem #1b1f2955;
cursor: pointer;
border-radius: 50%;
color: var(--black_color);
padding-top: 1rem;
background: transparent;
transition: 0.2s;
}
.social_icons .icon:hover {
background: var(--orange-color);
color: var(--white_color);
}
.form_div {
width: 100%;
margin-top: 2rem;
position: relative;
height: 4.8rem;
margin-bottom: 2.4rem;
}
.input_group {
top: 18rem;
position: absolute;
width: 28rem;
transition: 0.5s;
}
.form_input {
font-size: 1.6rem;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
box-shadow: 0 0 2rem 0.9rem #1b1f2955;
border-radius: 0.8rem;
outline: none;
padding: 1.6rem;
background: transparent;
z-index: 1;
transition: 0.3s;
}
.form_label {
position: absolute;
left: 1.6rem;
top: 1.6rem;
padding: 0 0.4rem;
background-color: transparent;
color: var(--black_color);
font-size: 1.6rem;
transition: 0.3s;
}
.form_input:focus + .form_label {
top: -0.8rem;
left: 1rem;
color: var(--white_color);
font-size: 1rem;
font-weight: 500;
z-index: 10;
background-color: var(--orange-color);
border-radius: 1rem;
padding: 0 0.5rem;
}
.form_input:not(:placeholder-shown).form_input:not(:focus)+ .form_label {
top: -0.8rem;
left: 1rem;
font-size: 1rem;
font-weight: 500;
background-color: var(--orange-color);
border-radius: 1rem;
color: var(--white_color);
z-index: 10;
}
.form_input:focus {
border: 0.15rem solid var(--orange-color);
}
.submit_btn {
width: 85%;
position: relative;
padding: 1rem 3rem;
cursor: pointer;
display: block;
margin: auto;
background-color:transparent;
box-shadow: 0 0 2rem 0.9rem #1b1f2955;
border: 0;
outline: none;
overflow: hidden;
font-weight: 600;
border-radius: 3rem;
transition: 0.5s;
}
.submit_btn:hover {
color: var(--white_color);
background-color: var(--orange-color);
}
.submit_btn span {
position: absolute;
background: var(--white_color);
transform:translate(-50%, -50%);
border-radius: 50%;
animation: btnAnim 1s linear infinite;
}
@keyframes btnAnim {
0%{
width: 0rem;
height: 0rem;
opacity: 1;
}
100%{
width: 50rem;
height: 50rem;
opacity: 0;
}
}
.checkbox {
margin: 2rem 1rem 3rem 0.5rem;
box-shadow: 0 0 2rem 0.5rem #1b1f2955;
accent-color: var(--success_color);
cursor: pointer;
}
.check_text {
color: var(--black_color);
font-size: 1.2rem;
bottom: 6.8rem;
position: absolute;
}
#login {
left: 5rem;
}
#register {
left: 45rem;
}
.error-msg {
display: block;
position: relative;
font-size: 1.4rem;
padding-left: 0.5rem;
}
.danger-color {
color: var(--danger_color);
}
.error {
border-color: var(--danger_color);
}
.valid {
color: var(--success_color);
}
.hide {
display: none;
}
.showbtn {
position: absolute;
right: 1rem;
top: 0.8rem;
width: 3.4rem;
font-size: 1.6rem;
color: var(--black_color);
height: 3.4rem;
background: rgba(0, 0, 0, 0.05);
border-radius: 50%;
cursor: pointer;
display: flex;
z-index: 100;
justify-content: center;
align-items: center;
}
.password_validation {
margin-top: 1.5rem;
}
.password_validation ul li {
list-style: none;
color: var(--black_color);
font-size: 1.4rem;
padding-left: 0.5rem;
}
.password_validation ul li.valid {
color: var(--white_color);
}
.password_validation ul li::before {
content:'\f192';
font-family: fontAwesome;
width: 2rem;
height: 1rem;
display: inline-flex;
}
.password_validation ul li.valid::before {
content: '\f00c';
color: var(--success_color);
}
.popup {
width: 30rem;
background-color: var(--white_color);
border-radius: 1rem;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%) scale(0.1);
text-align: center;
padding: 0 3rem 3rem;
color: var(--black_color);
visibility: hidden;
transition: transform 0.4s, top 0.4s;
}
.popup .valicon {
font-size: 4rem;
height: 6rem;
width: 6rem;
padding: 1rem;
margin-top: -3rem;
color: var(--white_color);
background-color: var(--success_color);
border-radius: 50%;
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
}
.popup .erroricon {
font-size: 4rem;
height: 6rem;
width: 6rem;
padding: 1rem;
margin-top: -3rem;
color: var(--white_color);
background-color: var(--danger_color);
border-radius: 50%;
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
}
.popup h2 {
font-size: 2.5rem;
font-weight: 500;
margin: 3rem 0 1rem;
}
.popup .ok_btn {
margin-top: 3rem;
width: 100%;
padding: 1rem 0;
background-color: var(--success_color);
color: var(--white_color);
border: 0;
outline: none;
font-size: 1.8rem;
border-radius: 0.4rem;
cursor: pointer;
font-weight: 500;
box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.3);
}
.open_popup {
visibility: visible;
top: 50%;
transform: translate(-50%, -50%) scale(1);
}JavaScript
/* --------------- Login & Register Button Function --------------------- */
var log = document.getElementById("login");
var reg = document.getElementById("register");
var btn = document.getElementById("btn");
var box = document.querySelector(".form_box");
function register(){
log.style.left = "-40rem";
reg.style.left = "5rem";
btn.style.left = "11rem";
box.style.height = "90rem";
}
function login(){
log.style.left = "5rem";
reg.style.left = "45rem";
btn.style.left = "0";
box.style.height = "55rem";
}
/* --------------- End Login & Register Button Function --------------------- */
/* --------------- Button Ripples Effect --------------------- */
const submitBtns = document.querySelectorAll('.submit_btn');
submitBtns.forEach(submitBtn => {
submitBtn.addEventListener('click', function(e) {
let x = e.clientX - e.target.getBoundingClientRect().left;
let y = e.clientY - e.target.getBoundingClientRect().top;
let ripples = document.createElement('span');
ripples.style.top = y + 'px';
ripples.style.left = x + 'px';
this.appendChild(ripples);
setTimeout(() => {
ripples.remove()
},1000);
})
})
/* --------------- End Button Ripples Effect --------------------- */
/* --------------- Register Form Validation --------------------- */
//User Name
let userNameInput = document.getElementById("user_name_input");
let userNameError = document.getElementById("user_name_error");
let userNameEmpty = document.getElementById("user_name_empty");
//Email
let emailInput = document.getElementById("email_input");
let emailError = document.getElementById("email_error");
let emailEmpty = document.getElementById("email_empty");
//Phone
let phoneInput = document.getElementById("phone_input");
let phoneError = document.getElementById("phone_error");
let phoneEmpty = document.getElementById("phone_empty");
//Password
let passwordInput = document.getElementById("password_input");
let passwordError = document.getElementById("password_error");
let passwordEmpty = document.getElementById("password_empty");
let showbtn = document.getElementById("showbtn");
//Submit
let regiterBtn = document.getElementById("submit_btn");
//Valid
let validCls = document.getElementsByClassName("valid");
let invalidCls = document.getElementsByClassName("error");
//User Name Verification
const textVerify = (text) => {
const regex = /^[a-zA-Z]{3,}$/;
return regex.test(text);
};
//Email verification
const emailVerify = (input) => {
const regex = /^[a-z0-9_]+@[a-z]{3,}\.[a-z\.]{3,}$/;
return regex.test(input);
};
//Phone number verification
const phoneVerify = (number) => {
const regex = /^[0-9]{10}$/;
return regex.test(number);
};
//Password Verification
const passwordVerify = (password) => {
const regex =
/^(?=.+[a-z])(?=.+[A-Z])(?=.+[0-9])(?=.+[\$\%\^\&\!@\#\*\(\)\+\=\?\>\<])/;
return regex.test(password) && password.length >= 8;
};
//Password Validation
let vallowChar = document.getElementById('lowChar');
let valupChar = document.getElementById('upChar');
let valnumber = document.getElementById('number');
let valspeChar = document.getElementById('speChar');
let valeigChar = document.getElementById('eigChar');
function passwordvalidation(data){
const lowChar = RegExp('(?=.*[a-z])');
const upChar = RegExp('(?=.*[A-Z])');
const number = RegExp('(?=.*[0-9])');
const speChar = RegExp('(?=.*[!@#\$%\^&\*])');
if(lowChar.test(data)){
vallowChar.classList.add('valid');
}else{
vallowChar.classList.remove('valid');
}
if(upChar.test(data)){
valupChar.classList.add('valid');
}else{
valupChar.classList.remove('valid');
}
if(number.test(data)){
valnumber.classList.add('valid');
}else{
valnumber.classList.remove('valid');
}
if(speChar.test(data)){
valspeChar.classList.add('valid');
}else{
valspeChar.classList.remove('valid');
}
if(data.length >= 8){
valeigChar.classList.add('valid');
}else{
valeigChar.classList.remove('valid');
}
}
//End Password Validation
//Hide & Show Password
showbtn.onclick = function(){
if(passwordInput.value.length >= 1){
if (passwordInput.type === 'password'){
passwordInput.setAttribute('type', 'text');
showbtn.classList.remove("fa-eye")
showbtn.classList.add("fa-eye-slash")
} else {
passwordInput.setAttribute('type', 'password');
showbtn.classList.remove("fa-eye-slash")
showbtn.classList.add("fa-eye")
}
}
}
const emptyUpdate = (inputReference, emptyErrorReference, otherErrorReference) => {
if (!inputReference.value) {
emptyErrorReference.classList.remove("hide");
otherErrorReference.classList.add("hide");
inputReference.classList.add("error");
} else {
emptyErrorReference.classList.add("hide");
}
};
const errorUpdate = (inputReference, errorReference) => {
errorReference.classList.remove("hide");
inputReference.classList.remove("valid");
inputReference.classList.add("error");
};
const validInput = (inputReference) => {
inputReference.classList.remove("error");
inputReference.classList.add("valid");
};
//User Name
userNameInput.addEventListener("input", () => {
if (textVerify(userNameInput.value)) {
userNameError.classList.add("hide");
validInput(userNameInput);
} else {
errorUpdate(userNameInput, userNameError);
emptyUpdate(userNameInput, userNameEmpty, userNameError);
}
});
//Email
emailInput.addEventListener("input", () => {
if (emailVerify(emailInput.value)) {
emailError.classList.add("hide");
validInput(emailInput);
} else {
errorUpdate(emailInput, emailError);
emptyUpdate(emailInput, emailEmpty, emailError);
}
});
//Phone
phoneInput.addEventListener("input", () => {
if (phoneVerify(phoneInput.value)) {
phoneError.classList.add("hide");
validInput(phoneInput);
} else {
errorUpdate(phoneInput, phoneError);
emptyUpdate(phoneInput, phoneEmpty, phoneError);
}
});
//Password
passwordInput.addEventListener("input", () => {
if (passwordVerify(passwordInput.value)) {
passwordError.classList.add("hide");
validInput(passwordInput);
} else {
errorUpdate(passwordInput, passwordError);
emptyUpdate(passwordInput, passwordEmpty, passwordError);
}
});
//Submit button
regiterBtn.addEventListener("click", function(event){
event.preventDefault();
if (invalidCls.length == 0 && validCls.length == 9){
showvalPopup();
} else {
showerrorPopup();
}
});
/* --------------- End Register Form Validation --------------------- */
/* --------------- Success & Error Popup --------------------- */
let Valpopup = document.getElementById("Valpopup");
let errorpopup = document.getElementById("errorpopup");
function showvalPopup(){
Valpopup.classList.add("open_popup");
};
function showerrorPopup(){
errorpopup.classList.add("open_popup");
};
function closevalPopup(){
Valpopup.classList.remove("open_popup");
window.location.reload();
};
function closeerrorPopup(){
errorpopup.classList.remove("open_popup");
};
/* --------------- End Success & Error Popup --------------------- */ YouTube Video
Download Source Code
Don’t forget to share this post!
Click Here : To Show Your Support! 😍
