Form validation with JavaScript
Form validation normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server.
JavaScript provides a way to validate form’s data on the client’s computer before sending it to the web server. Form validation generally performs two functions.
- Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data.
- Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
/* font-family: 'Herr Von Muellerhoff', cursive; */
/* font-family: 'Roboto', sans-serif; */
:root {
--font-family1: 'Herr Von Muellerhoff', cursive;
--font-family2: 'Roboto', sans-serif;
--text-color: #77777a;
--btn-color: #6f11f5;
--backgrond: linear-gradient(to bottom right, #33ccff 0%, #ff99cc 100%);
--background2: linear-gradient(121deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 115, 1) 0%, rgba(255, 153, 204, 1) 17%, rgba(51, 204, 255, 1) 100%);
}
* {
margin: 0;
padding: 0;
border: none;
outline: none;
font-family: 'Roboto', sans-serif;
overflow-x: hidden;
}
section {
width: 100%;
height: 100vh;
background-color: #e6e4fa;
/* background: black; */
z-index: -1;
overflow-y: hidden;
overflow-x: hidden;
}
.backbox {
width: 500px;
height: 500px;
background: var(--backgrond);
border-radius: 50%;
display: inline-block;
position: absolute;
}
.box1 {
transition: 5s;
animation: move 5s ease-in-out infinite;
background: var(--backgrond);
}
@keyframes move {
50% {
transform: translateX(173%) rotate(360deg);
}
100% {
transform: translateX(0%);
}
}
.box2 {
width: 300px;
height: 300px;
transition: 5s;
animation: moveTwo 5s ease-in-out infinite;
margin-left: 40%;
}
@keyframes moveTwo {
50% {
transform: translateY(123%) rotate(360deg);
}
100% {
transform: translateY(0%);
}
}
.box3 {
width: 400px;
height: 400px;
background: rgb(2, 0, 36);
background: var(--background2);
position: absolute;
right: 0;
bottom: 0;
animation: moveThree 10s ease-in-out infinite;
}
@keyframes moveThree {
50% {
transform: translateX(-242%) rotate(360deg);
}
100% {
transform: translateX(0%);
}
}
.form {
width: 100%;
height: 110vh;
position: absolute;
top: 0;
backdrop-filter: blur(4px);
display: flex;
justify-content: center;
align-items: center;
}
.form_div {
width: 500px;
height: 600px;
position: relative;
}
.form_div::before {
content: " ";
width: 100%;
height: 100%;
background: #f3f4fd;
opacity: .7;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 30px;
z-index: -1;
}
.form_div button {
padding: 15px 40px;
border-radius: 10px;
margin-top: 30px;
color: var(--btn-color);
opacity: 1;
font-size: 17px;
cursor: pointer;
background: transparent;
transition: .5s;
background: linear-gradient(145deg, #b7cce0, #d9f3ff);
}
.form_div button:hover {
background: var(--btn-color);
color: #eee;
}
.form_div form {
margin-top: 30px;
}
.form_div .formdesign input {
width: 80%;
height: 50px;
border-radius: 5px;
padding-left: 20px;
font-size: 18px;
caret-color: var(--btn-color);
}
#vehicle1 {
width: 20px;
height: 20px;
border: none;
outline: none;
}
.form_div form {
margin-top: 30px;
}
.form_div form label {
font-size: 18px;
color: var(--btn-color);
}
.formdesign {
font-size: 15px;
}
.formerror {
color: var(--btn-color);
}
#myCheck {
width: 20px;
height: 20px;
}
#tick label {
position: relative;
top: -2px;
}
.but {
width: 80%;
color: #eee;
height: 50px;
border-radius: 10px;
cursor: pointer;
font-size: 20px;
background: var(--btn-color);
margin-top: 50px;
}
.but:hover {
border: 1px solid var(--btn-color);
background: linear-gradient(145deg, #b7cce0, #d9f3ff);
color: #6f11f5;
}
.form_div form ion-icon {
font-size: 20px;
color: var(--text-color);
position: relative;
left: -40px;
}
</style>
<body>
<section>
<div class="backbox box1"></div>
<div class="backbox box2"></div>
<div class="backbox box3"></div>
</section>
<div class="form">
<div class="form_div">
<center>
<button>
<ion-icon name="person"></ion-icon>
Sign In
</button>
<button style="margin-left: 20px;">
<ion-icon name="person-add"></ion-icon>
Sign Up
</button>
</center>
<center>
<form name="myForm" onsubmit="return validateForm()">
<div class="formdesign" id="name">
<input type="text" name="fname" placeholder="Name:">
<ion-icon name="person-circle-outline" class="icon"></ion-icon>
<br><span class="formerror"></span>
</div>
<br>
<div class="formdesign" id="email">
<input type="email" name="femail" placeholder="Email:">
<ion-icon name="mail-outline" class="icon"></ion-icon>
<br><span class="formerror"> </span>
</div>
<br>
<div class="formdesign" id="pass">
<input type="password" name="fpass" placeholder=" Password:">
<ion-icon name="alert-circle-outline" class="icon"></ion-icon>
<br><span class="formerror"></span>
</div>
<br>
<div class="formdesign" id="cpass">
<input type="password" name="fcpass" placeholder="Confirm Password:">
<ion-icon name="checkmark-done-circle-outline" class="icon"></ion-icon>
<br><span class="formerror"></span>
</div>
<br>
<div>
<input type="checkbox" id="myCheck">
<label for="vehicle1">Accpet Terms & Conditions</label><br>
<span id="demo"></span>
</div>
<input class="but" type="submit" value="Submit" onclick="myFunction()">
</form>
</center>
</div>
</div>
<script>
function clearErrors() {
errors = document.getElementsByClassName('formerror');
for (let item of errors) {
item.innerHTML = "";
}
}
function seterror(id, error) {
//sets error inside tag of id
element = document.getElementById(id);
element.getElementsByClassName('formerror')[0].innerHTML = error;
}
function validateForm() {
var returnval = true;
clearErrors();
//perform validation and if validation fails, set the value of returnval to false
var name = document.forms['myForm']["fname"].value;
if (name.length < 5) {
seterror("name", "*Length of name is too short");
returnval = false;
}
if (name.length == 0) {
seterror("name", "*Length of name cannot be zero!");
returnval = false;
}
var email = document.forms['myForm']["femail"].value;
if (email.length >= 20) {
seterror("email", "*Email length is too long");
returnval = false;
}
var password = document.forms['myForm']["fpass"].value;
if (password.length < 6) {
// Quiz: create a logic to allow only those passwords which contain atleast one letter, one number and one special character and one uppercase letter
seterror("pass", "*Password should be atleast 6 characters long!");
returnval = false;
}
var cpassword = document.forms['myForm']["fcpass"].value;
if (cpassword != password) {
seterror("cpass", "*Password and Confirm password should match!");
returnval = false;
}
return returnval;
}
</script>
<!-- ion-icon script link -->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<!-- main script file link -->
<script src="index.js"></script>
</body>
</html>