.png)
Form validation is an essential aspect of web development that ensures the accuracy and integrity of the data entered into online forms. JavaScript is a popular programming language that can be used to implement form validation on web pages.
Form validation with JavaScript involves using scripts to check if the data entered into a form meets specific criteria or conditions. This process can be done in real-time, as the user fills out the form, or after the form is submitted.
JavaScript can be used to validate different types of form fields, including text fields, checkboxes, radio buttons, dropdown menus, and more. The validation process typically involves checking the data entered into each field against a set of rules or conditions.
For example, a form field that requires a valid email address would be validated by checking if the data entered contains the "@" symbol and a valid domain name. If the data entered does not meet these criteria, an error message would be displayed, prompting the user to correct their input.
Form validation with JavaScript can help prevent errors, reduce user frustration, and improve the overall user experience. By providing real-time feedback and guiding users through the input process, form validation can make online forms more intuitive and user-friendly.
HTML CODE
<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/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<!-- main script file link -->
<script src="index.js"></script>
CSS CODE
: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;
}
Comments
Post a Comment