☆ This is a JavaScript Form Validation free project. In this project, we will check whether the username, email, and password entered are correct or incorrect. We will show an error if the details entered are incorrect. And if the details entered are correct then we will show the success message.
☆ The source code of this project is freely available on my Free Projects1 Website and GitHub Profile.
☆ In this project, we can validate the user's form details, which means when the user enters details in this form then we can check which details are correct or which are incorrect.
☆ If the user enters the correct details in this form then we will show a box with a success message.
☆ This project is responsive means it successfully works on both mobile and desktop versions.
☆ Used languages are HTML, CSS, and JavaScript.
Project Source Code
1.1 index file
<!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> JavaScript Form Validation | Free Projects1 </title>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<meta name="keywords" content="free projects for computer science students, free project 1, free projects1, free projects for computer science, free projects on github, freeprojects1.blogspot.com">
<meta name="description" content="This is a Javascript Form Validation free project. In this project, we will check whether the username, email and password entered are correct or incorrect. We will show an error if the details entered are incorrect. And if the details entered are correct then we will show the success message.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h2> REGISTRATION FORM </h2>
</div>
<form class="form" id="form">
<div class="form-control">
<label> Username </label>
<input type="text" name="" id="username" placeholder="Enter Full Name" autocomplete="off">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small> Error Msg </small>
</div>
<div class="form-control">
<label> Email </label>
<input type="email" name="" id="email" placeholder="Enter Email" autocomplete="off">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small> Error Msg </small>
</div>
<div class="form-control">
<label> Phone Number </label>
<input type="number" name="" id="phone" placeholder="Enter Your Phone Number" autocomplete="off">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small> Error Msg </small>
</div>
<div class="form-control">
<label> Password </label>
<input type="password" name="" id="password" placeholder="Enter Password" autocomplete="off">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small> Error Msg </small>
</div>
<div class="form-control">
<label> Re-Enter Password </label>
<input type="password" name="" id="cpassword" placeholder="Confirm Password" autocomplete="off">
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small> Error Msg </small>
</div>
<input type="submit" value="Submit" class="btn" name="">
</form>
</div>
<script type="text/javascript">
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const phone = document.getElementById('phone');
const password = document.getElementById('password');
const cpassword = document.getElementById('cpassword');
form.addEventListener('submit', (event) => {
event.preventDefault();
validate();
})
const sendData = (sRate, count) => {
if (sRate === count) {
alert('Registration Success');
}
}
//check final form data validation
const successMsg = () => {
formCon = document.getElementsByClassName('form-control');
var count = formCon.length - 1;
for(var i = 0; i < formCon.length; i++){
if (formCon[i].className === "form-control success") {
// var sRate = 0 + 1;
var sRate = 1 + i;
// console.log(formCon[i]);
// console.log(count);
sendData(sRate, count);
}else{
return false;
}
}
}
// check deeply email address
const isEmail = (emailVal) => {
var atSymbol = emailVal.indexOf("@");
if (atSymbol < 1) return false;
var dot = emailVal.lastIndexOf(".");
if (dot <= atSymbol + 1) return false;
if (dot === emailVal.length - 1) return false;
return true;
}
const validate = () =>{
const usernameVal = username.value.trim();
const emailVal = email.value.trim();
const phoneVal = phone.value.trim();
const passwordVal = password.value.trim();
const cpasswordVal = cpassword.value.trim();
//validate username
if (usernameVal === "") {
setErrorMsg(username, 'Please fill out username!');
}else if(usernameVal.length <= 2) {
setErrorMsg(username, 'Username must have at least min 3 characters!');
}else{
setSuccessMsg(username);
}
//validate email
if (emailVal === "") {
setErrorMsg(email, 'Please fill out email!');
}else if(!isEmail(emailVal)) {
setErrorMsg(email, 'Not a valid email!');
}else{
setSuccessMsg(email);
}
//validate phone number
if (phoneVal === "") {
setErrorMsg(phone, 'Please fill out phone number!');
}else if(phoneVal.length != 10 ) {
setErrorMsg(phone, 'Phone number must have 10 digits only!');
}else{
setSuccessMsg(phone);
}
//validate password
if (passwordVal === "") {
setErrorMsg(password, 'Please fill out password!');
}else if(passwordVal.length <= 7 ) {
setErrorMsg(password, 'Password must have at least 8 characters!');
}else{
setSuccessMsg(password);
}
//validate password
if (cpasswordVal === "") {
setErrorMsg(cpassword, 'Please fill out confirm password!');
}else if(passwordVal != cpasswordVal ) {
setErrorMsg(cpassword, 'Password matching failed, Try again!');
}else{
setSuccessMsg(cpassword);
}
successMsg();
}
function setErrorMsg(input, errormsgs) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = "form-control error";
small.innerText = errormsgs;
}
function setSuccessMsg(input) {
const formControl = input.parentElement;
formControl.className = "form-control success";
}
</script>
</body>
</html>
1.2 CSS file
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Mulish:wght@500');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--myfont: 'Mulish', sans-serif;
--my-btn-font: 'Montserrat', sans-serif;
--lg-lightcolor: linear-gradient(to left, rgba(116, 235, 213, 0.6), rgba(159, 172, 230, 0.6));
--lg-color: linear-gradient(to left, #74ebd5, #9face6);
}
body{
background-image: var(--lg-lightcolor), url('https://images.pixels.com/photos/325193/pixels-photo-325193.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-size: 100%;
background-repeat: no-repeat;
/*font-family: var(--my-font);*/
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100vw;
}
.container{
background: #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
/*box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.;*/
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048);
overflow: hidden;
width: calc(100vw - 65vw);
max-width: 100%;
}
.header{
background: var(--lg-color);
padding: 30px 0;
}
.header h2{
color: #222;
font-family: var(--my-btn-font);
font-size: 24px;
text-transform: uppercase;
text-align: center;
}
.form{
padding: 15px 40px;
}
.form-control{
margin-bottom: 25px;
position: relative;
}
.form-control label{
display: inline-block;
margin-bottom: 5px;
font-family: sans-serif;
}
.form-control input{
width: 100%;
border: 2px solid #f0f0f0;
border-radius: 5px;
display: block;
font-family: var(--myfont);
font-size: 14px;
padding: 10px;
}
.form-control input:focus{
outline: none;
border-color: #777;
}
.form-control.success input{
border-color: #2ecc71;
}
.form-control.error input{
border-color: #e74c3c;
}
.form-control i{
position: absolute;
right: 12px;
top: 38px;
visibility: hidden;
}
.form-control.success i.fa-check-circle{
color: #2ecc71;
visibility: visible;
}
.form-control.error i.fa-exclamation-circle{
color: #e74c3c;
visibility: visible;
}
.form-control small{
color: #e74c3c;
position: absolute;
left: 0;
font-family: sans-serif;
visibility: hidden;
}
.form-control.error small{
visibility: visible;
}
.form .btn{
background: var(--lg-color);
border-radius: 6px;
border: none;
outline: none;
color: #fff;
display: block;
font-family: var(--my-btn-font);
font-size: 16px;
padding: 15px 0;
margin-top: 20px;
width: 100%;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
transition: all 1s ease;
}
.form .btn:hover{
background: linear-gradient(to right, #74ebd5, #9face6);
}
@media (max-width: 998px)
{
.container{
width: calc(100vw - 35vw);
max-width: 100%;
}
}
Please do not enter any spam link in the comment box.