Description
ISHAAN OHRI
18BCE0265
Question:
Write a javascript program to validate HTML form fields in a webpage.
Design a Registration Webpage for an insurance company.
The form must contain a minimum of 10 fields.
Implement Java Script with regular expression to validate the following
For Last Name field – the last name should be dot(.) followed by single letter combination(Note:.K or .N.L is allowed.kumar or Nakul is not allowed ).
For E-Mail ID accept only the gmail ID.
With the Data of Birth input,calculate the age of the person and populate it in the textbox automatically.
Validate the form for empty field submissions.
Procedure:
<!DOCTYPE html>: Tells browser that it is an HTML document
<head>: Container for header elements
<title>: Name for toolbar
<body>: Body element for document
<style>: Styles for the different elements
<h1>: Heading of level 1
align: alignment on the HTML document
<form>: Creates an HTML form for user input action: backend script to process data
method: API request method
<table>: Defines a table cellpadding: Space to left on all 4 sides inside the cell
<tr>: Defines a new table row
<td>: Defines a cell
<input>: Declare input controls that allow users to input data. type: Defines the type of input text/radio/checkbox name: Defines the name of the <input> element id: Unique id to identify
pattern: Defines pattern of input data
required: Compulsory to enter value: Defines the value of the option in radio/checkbox
<label>: Represents a caption for an item in a user interface
For:
<textarea>: Multi-line text input control
rows: Min no of rows cols: Min no of cols.
background-color: Defines the background colour of the element font-size: Defines the font size of the enclosed font text-align: Defines the alignment of the text font-family: Defines the font of the text font-style: Defines the style of font like bold, italic etc.
padding-left: Defines the left padding
padding-right: Defines the right padding
Code: index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>18BCE0265 IWP Lab DA – 4</title>
<link rel=”stylesheet” href=”style.css”>
<script src=”script.js”></script>
</head>
<body>
<h1 align=”center”>Insurance Details</h1>
<div>
<form id=”insurance-form” onsubmit=”submitForm()” action=”submit” method=”POST”>
First Name:
<input type=”text” id=”first-name” required>
<br><br> Last Name:
<input type=”text” id=”last-name” required>
<br><br>
<br><br>
Age:
<input type=”number” id=”age”> <br><br>
Gender:
<input type=”radio” name=”gender” value=”male” checked>Male
<input type=”radio” name=”gender” value=”female”>Female
<input type=”radio” name=”gender” value=”other”>Other
<br><br>
Email ID:
<input type=”email” id=”email” required style=”text-transform:
lowercase;”>
<br><br>
Mobile Number:
<input type=”text” id=”mobile” required>
<br><br> Address:
<textarea id=”address” rows=”5″ cols=”30″ required></textarea>
<br><br> Pincode:
<input type=”text” id=”pincode” required>
<br><br>
Do you have any Health Problems ?
<input type=”radio” name =”health” value=”yes”>Yes
<input type=”radio” name =”health” value=”no” checked>No<br><br>
List health problems if any :
<textarea id=”health-problems” rows=”5″ cols=”30″ ></textarea>
<br><br>
<input type=”submit” value=”Validate”/> <br>
</form>
</div>
</body>
</html>
style.css
body{
background-color: rgb(20,20,20);
font-family: Verdana, Geneva, Tahoma, sans-serif; color: rgb(16, 229, 125);
} form{
text-align: center; font-size: 1em; font-weight: 700;
font-family: Verdana, Geneva, Tahoma, sans-serif;
} input{
height: auto; width: auto;
padding: 5px 10px 5px 10px; text-transform: capitalize; background-color: rgb(20,20,20); border: 2px solid rgb(156,156,156); border-radius: 5px; color: white; font-size: 1em;
font-family: Verdana, Geneva, Tahoma, sans-serif;
} textarea{
padding: 5px 10px 5px 10px; text-transform: capitalize; background-color: rgb(20,20,20); border: 2px solid rgb(156,156,156); border-radius: 5px; color: white; font-size: 1em; font-family: Verdana, Geneva, Tahoma, sans-serif; }
script.js
function calculateAge(){
var age = current.getFullYear() – year; if(
current.getMonth() < month ||
){
age = age – 1;
}
currentAge = document.getElementById(“age”); currentAge.value= age;
}
function submitForm() { var pattern = /^([.][A-Z])*$/;
var text = document.getElementById(“last-name”); if(!pattern.test(text.value)){ alert(“Enter Correct Last Name”); text.focus();
}
var pattern = /^[a-z0-9._-]+@[gmail]+.[com]{2,5}$/i; var text = document.getElementById(“email”); if(!pattern.test(text.value)){ alert(“Enter Correct Email”); text.focus();
}
}
Output:
Reviews
There are no reviews yet.