Scribd
Upload
67 views5 pages

1.create A Form and Validate The Content of The Form Using Javascript

The document describes how to create an HTML form and validate its contents using JavaScript. It includes: 1. Using <form> and <input> tags to design the form in HTML. 2. Adding attributes like action and method to the <form> tag. 3. Creating a .js file to write JavaScript code for validation and linking it to the HTML using <script> tags. 4. Using addEventListener to listen for form submit events and validate field values with if statements. 5. Displaying any validation errors in an alert. 6. Submitting the validated form to a welcome page.

Uploaded by

Gokul Raj S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
67 views5 pages

1.create A Form and Validate The Content of The Form Using Javascript

The document describes how to create an HTML form and validate its contents using JavaScript. It includes: 1. Using <form> and <input> tags to design the form in HTML. 2. Adding attributes like action and method to the <form> tag. 3. Creating a .js file to write JavaScript code for validation and linking it to the HTML using <script> tags. 4. Using addEventListener to listen for form submit events and validate field values with if statements. 5. Displaying any validation errors in an alert. 6. Submitting the validated form to a welcome page.

Uploaded by

Gokul Raj S
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

1.Create a form and validate the content of the form using JavaScript

Aim:
To write HTML tags for form design as well as prepare client side JavaScript for the form
validation.

Procedure:
 Should go towards start menu-> cmd, It’s a way of opening windows command prompt,
then select project directory and put the command code . , it’s open the visual studio code
with the chosen directory.

 <form></form> tag which is help’s to build form design in HTML. All at once put <input />
tag inside the form tag. It helps to build the input field. Various kind of input fields is
available however In here used text, radio, and submit the type of fields.

 Form tag has two important attributes which are action and method. The method defines
HTTP methods, other hand action defines URL which is routed when the form has been
submitted.

 Create a file with an extension of .js which is an extension of a JavaScript file. Put JavaScript
code for form validation.

 These JavaScript file is link with HTML page with the help of <script></script> tag. This tag
has a src attribute which enables the linking option. For example <script src=”main.js”
type=”text/javascript” ></script>

 Usually the addEventListener() function is listen to the events like click, submit, hover, and
so on. In here used addEventLister is listened form submit an event.
document.getElementById('registerForm').addEventListener('submit',(e)=>{})

 document.getElementById(selector).value which is get the value from the input field.

 Those value is validated with help of if conditions. If anyone’s condition is not satisfied,
those errors will be posted in the alert message box.

 Finally run the HTML file on the browser and get the output successfully.

fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal
fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

Code:
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>create a Form and Validate the contents</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box" >
<div align="center" >
<h3>Seminar Registeration</h3>
</div>
<form action="welcome.html" id="registerForm" >
<label for="name">Student Name</label>
<input type="text" name="name" id="name" />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
<label for="clgName">College Name</label>
<input type="text" name="clgName" id="clgName" />
<label for="mobileNo">Mobile Number</label>
<input type="text" name="mobileNo" id="mobileNo" />
<div class="gender">
<label for="">Gender</label> <br/> <br />
<input type="radio" name="gender" id="male" value="male" />
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female" />
<label for="female">Female</label>
<input type="radio" name="gender" id="others" value="others" />
<label for="others">others</label>
</div>
<div align="center" >
<input type="submit" value="Register">
</div>
</form>
</div>

<script src="main.js"></script>
</body>
</html>

fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal
fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

main.js
document.getElementById('registerForm').addEventListener('submit',(e)=>{
let user = document.getElementById('name').value;
let email = document.getElementById('email').value;
let clgName = document.getElementById('clgName').value;
let mbleNo = document.getElementById('mobileNo').value;
let gender = document.getElementsByName('gender');
let genderValue = false
let error = [];

if( user.length <= 2 || !user.match((/^[a-z]+$/)) ){


error.push("invalid student name");
}
if(email.length < 5 || email.indexOf('@') == -1 || email.indexOf('.') == -1
){
error.push("Invalid Email Address");
}

if(clgName.length < 5){


error.push("Invalid college name");
}

if(mbleNo.length != 10 || !mbleNo.match((/^[0-9]+$/)) ){
error.push("Invalid Phone Number");
}

for(let i=0;i<gender.length;i++){
if(gender[i].checked){
genderValue = true
}
}

if(genderValue == false){
error.push("Plase select gender option")
}

if(error.length != 0){
e.preventDefault()
alert(error.map((data)=>`\n ${data}`))
}

});

style.css
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}
.box{
width: 300px;
border:1px solid #000;

fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal
fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

padding: 20px;
}
input{
width: 100%;
height: 25px;
margin-bottom: 15px;
}
h3{
padding: 20px;
}
input[type="submit"]{
height: 30px;
background-color: darkblue;
border: none;
outline: none;
cursor: pointer;
color: #fff;
font-size: 16px;
transition: .5s;
}
input[type="submit"]:hover{
background-color: blue;
}
input[type="radio"]{
width: 12px;
height: 12px;
}
.gender label{
padding-right: 20px;
}

Welcome.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div align="center" >
<h1> Form submitted successfully </h1>
</div>
</body>
</html>

fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal
fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

Output:

fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal
fffffffffffffoooooooooooadfadfakflaksksdfafalskjfal

You might also like