In this article, we can see about validations in JavaScript. HTML Form verification can be done in JavaScript.
Introduction
JavaScript is used mainly for client-side validations. A form is also called a web form or HTML form. Forms are used on web pages for users to enter their required details, which are sent to the server for processing—for example, Student registration forms, online banking, e-commerce sites, etc.
Below is a code in HTML, CSS, and JavaScript to verify a form. HTML is used to create the form. CSS is designing the layout of the form. JavaScript to check the form.
Here is my HTML code for this.
Try it yourself,
<!DOCTYPE html>
<html>
<head>
<title>Reg Form</title>
</head>
<body>
<center><h1>Form Validation using HTML,CSS,JavaScript</h1></center>
<hr>
<form method="" action="" name="reg_form" onsubmit="return validate()">
<h2>Registration Form</h2>
<table>
<tr>
<td><label>First Name: </label></td>
<td>
<input type="text" name="fname" placeholder="First Name">
</td>
</tr>
<tr>
<td><label>Last Name: </label></td>
<td>
<input type="text" name="lname" placeholder="Last Name">
</td>
</tr>
<tr>
<td><label>Address: </label></td>
<td>
<input type="textarea" size="50" name="address" placeholder="Address">
</td>
</tr>
<tr>
<td><label>Gender: </label></td>
<td>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="femele">Female
</td>
</tr>
<tr>
<td><label>Email Id: </label></td>
<td>
<input type="text" name="email" placeholder="[email protected]">
</td>
</tr>
<tr>
<td><label>Mobile: </label></td>
<td>
<input type="number" name="mobile">
</td>
</tr>
<tr>
<td><label>Course: </label></td>
<td>
<select name="course">
<option value="select course">select course</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JAVASCRIPT</option>
<option value="Java">JAVA</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Output
![Images/Skeloton of Form.jpg]()
Here is my CSS code for this.
After applying the CSS code, the form will change to a responsive format.
Try it yourself,
<style type="text/css">
body{
font-family: Calibri;
}
input[type="text"] {
width: 250px;
}
input[type="submit"], input[type="reset"] {
width: 77px;
height: 27px;
position: relative;left: 180px;
}
form{
text-align: center;
font-family: Calibri;
font-size: 20px;
border: 3px solid black;
width: 600px;
margin: 20px auto;
}
td {
padding: 10px;
}
td:first-child {
text-align: right;
font-weight: bold;
}
td:last-child {
text-align: left;
</style>
Output
![Images/CSS 1.jpg]()
Here is my JavaScript code for this.
After successfully creating the form, the next step is to validate the form using JavaScript.
Try it yourself.
The first step is to validate the Form in First Name and Last Name,
<script>
function validate() {
var fname = document.reg_form.fname;
var lname = document.reg_form.lname;
if (fname.value.length <= 0) {
alert("Name is required");
fname.focus();
return false;
}
if (lname.value.length <= 0) {
alert("Last Name is required");
lname.focus();
return false;
}
</script>
Output
![Images/fname1.jpg]()
![Images/lname1.jpg]()
Next, check the value Form in address, gender,
<script>
var address = document.reg_form.address;
var gender = document.reg_form.gender;
if (address.value.length <= 0) {
alert("Address is required");
address.focus();
return false;
}
if (gender.value.length <= 0) {
alert("Gender is required");
gender.focus();
return false;
}
</script>
Output
![Images/address1.jpg]()
![Images/gender1.jpg]()
Here is my JavaScript code for Form validations.
<!DOCTYPE html>
<html>
<head>
<title>Reg Form</title>
<style type="text/css">
body{
font-family: Calibri;
}
input[type="text"] {
width: 250px;
}
input[type="submit"], input[type="reset"] {
width: 77px;
height: 27px;
position: relative;left: 180px;
}
form{
text-align: center;
font-family: Calibri;
font-size: 20px;
border: 3px solid black;
width: 600px;
margin: 20px auto;
}
td {
padding: 10px;
}
td:first-child {
text-align: right;
font-weight: bold;
}
td:last-child {
text-align: left;
</style>
<script>
function validate() {
var fname = document.reg_form.fname;
var lname = document.reg_form.lname;
var address = document.reg_form.address;
var gender = document.reg_form.gender;
var email = document.reg_form.email;
var mobile = document.reg_form.mobile;
var course = document.reg_form.course;
if (fname.value.length <= 0) {
alert("Name is required");
fname.focus();
return false;
}
if (lname.value.length <= 0) {
alert("Last Name is required");
lname.focus();
return false;
}
if (address.value.length <= 0) {
alert("Address is required");
address.focus();
return false;
}
if (gender.value.length <= 0) {
alert("Gender is required");
gender.focus();
return false;
}
if (email.value.length <= 0) {
alert("Email Id is required");
email.focus();
return false;
}
if (mobile.value.length <= 0) {
alert("Mobile number is required");
mobile.focus();
return false;
}
if (course.value == "select course") {
alert("Course is required");
course.focus();
return false;
}
return false;
}
</script>
</head>
<body>
<center><h1>Form Validation using HTML,CSS,JavaScript</h1></center>
<hr>
<form method="" action="" name="reg_form" onsubmit="return validate()">
<h2>Registration Form</h2>
<table>
<tr>
<td><label>First Name: </label></td>
<td>
<input type="text" name="fname" placeholder="First Name">
</td>
</tr>
<tr>
<td><label>Last Name: </label></td>
<td>
<input type="text" name="lname" placeholder="Last Name">
</td>
</tr>
<tr>
<td><label>Address: </label></td>
<td>
<input type="textarea" size="50" name="address" placeholder="Address">
</td>
</tr>
<tr>
<td><label>Gender: </label></td>
<td>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="femele">Female
</td>
</tr>
<tr>
<td><label>Email Id: </label></td>
<td>
<input type="text" name="email" placeholder="[email protected]">
</td>
</tr>
<tr>
<td><label>Mobile: </label></td>
<td>
<input type="number" name="mobile">
</td>
</tr>
<tr>
<td><label>Course: </label></td>
<td>
<select name="course">
<option value="select course">select course</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JAVASCRIPT</option>
<option value="Java">JAVA</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
Output
Enter your data in the registration form.
![Images/final.jpg]()
This way, we can enable all JavaScript verifications.
Summary
This article taught us about form verification using HTML, CSS, and JavaScript. I hope this is helpful to you. If you have any comments, please leave a comment. Thanks!