JavaScript - Form Validation

What is a form validation ?

Form validation is the process of validating all the fields in the form.

In Javascript, form validation is done in the client-side environment.

All the form fields like textbox, password etc present inside the form are validated.

What are the types of form validation in Javascript ?

Form validation process is by these two validation steps.

1. Field Validation

2. Pattern Validation.

Basics of javascript for beginners !!!
Click to Learn More about – Javascript online learning

1. Field Validation

Checking all the mandatory fields/values present in the form while submitting.

2. Pattern Validation.

This process checks whether the data entered in the form, matches the pattern/condition or not.

Why is form validation used ?

Form validation is used to prevent our webpage abused by malicious users.

This also prevents security vulnerabilities.

This also prevents the attacks like SQL injections, Virus etc.

1. Basic Field Validation

This is a basic form validation consists of conditions listed below,

1. FirstName should not be empty.

2. LastName should not be empty.

3. Age should be below 100.

4. Mobile number should be in 10 digits.5. Password should be less than or equal to 6 characters

Code Example :

<script>
                        function validateForm(){
                                var fname = document.f1.FirstName.value;
                                var lname = document.f1.LastName.value;
                                var age = document.f1.Age.value;
                                var mobile = document.f1.Mobile.value;
                                var password = document.f1.Password.value;
                                if(fname == ""){
                                        alert("FirstName is empty, please enter the first name");
                                        return false;
                                }
                                if(lname == ""){
                                        alert("LastName is empty, please enter the last name");
                                        return false;
                                }
                                if((age == "") || (age>100)){
                                        alert("Age field may be empty or more than 100");
                                        return false;
                                }
                                if((mobile == "") || (mobile.length>10)){
                                        alert("Mobile field may be empty or incorrect mobile number");
                                        return false;
                                }
                                if((password == "") || (password.length>6)){
                                        alert("Password field may be empty or Password length is more than 6 charecters");
                                        return false;
                                }
                                return true;
                        }
	</script>

Example :

<!DOCTYPE html>
<html>

	<head>
		<title>Our title</title>
		<style>
		#dId-1{
			width: 35%;
			height: 30%;
			text-align:left;
			padding: 20px;
			margin: 10px;
			border: 2px solid green;
			font-size: 20px;
		}
		#dId-2{
			width: 35%;
			height: 30%;
			margin: 10px;
			border: 2px solid green;
			padding: 20px;
			font-size: 20px;
		}
		.b1, .b2, .b3, .b4, .b5, .s1, .s2, .s3, .s4, .s5{
			width:200px;
			height:30px;
			font-size: 20px;
		}
		</style>
		<script>
			function validateForm(){
				var fname = document.f1.FirstName.value;
				var lname = document.f1.LastName.value;
				var age = document.f1.Age.value;
				var mobile = document.f1.Mobile.value;
				var password = document.f1.Password.value;
				if(fname == ""){
					alert("FirstName is empty, please enter the first name");
					return false;
				}
				if(lname == ""){
                                        alert("LastName is empty, please enter the last name");
                                        return false;
                                }
				if((age == "") || (age>100)){
					alert("Age field may be empty or more than 100");
					return false;
				}
				if((mobile == "") || (mobile.length>10)){
					alert("Mobile field may be empty or incorrect mobile number");
					return false;
				}
				if((password == "") || (password.length>6)){
                                        alert("Password field may be empty or Password length is more than 6 charecters");
                                        return false;
                                }
				return true;
			}
		</script>
	</head>
	<body>
		<form name="f1" onSubmit="return validateForm()">
		<div id="dId-1">
			<p>FirstName : <input type="text" name="FirstName"> ** ( shouldn't be empty) </p>
			<p>LastName : <input type="text" name="LastName"> ** (shouldn't be empty)</p>
			<p>Age : <input type="text" name="Age"> ** (below 100) </p>
			<p>Mobile : <input type="text" name="Mobile"> ** ( should be 10 digits)</p>
			<p>Password : <input type="password" name="Password"> ** (not more than 6 chars)</p>
		</div>
		<div id="dId-2">
			<input type="submit" name="submit" value="Submit" style="width: 200px;height: 60px;font-size: 50px;color: green;background-color: #bfdbef;">
		<div>
		</form>
	</body>
</html>

Output :

1. Output screen