Scribd
Upload
12 views3 pages

Exwt 3

Web technologies

Uploaded by

prathameshp9922
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
12 views3 pages

Exwt 3

Web technologies

Uploaded by

prathameshp9922
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/ 3

Experiment No: 3

Title: Demonstrate javascript functions to validate registration form.

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form</title>
<style>
p {
color: rgb(56, 119, 192);
font-family: 'Times New Roman', Times, serif;
font-weight: bold;
font-size: 20px;
}
</style>
<link rel="stylesheet" href="registration_style.css">
</head>
<body>
<div>
<h2 style="color: brown; font-size: 22px; font-weight: bold;">Registration
Page</h2>
<p>Register now !!</p>

<form id="registrationForm" action="success.html" method="post"


onsubmit="return validateForm()">
<div style="width: 400px; position: absolute; left: 10%;">
<label>Firstname:</label>
<input type="text" name="firstname" size="15" required/><br>

<label>Middlename:</label>
<input type="text" name="middlename" size="15"/><br>

<label>Lastname:</label>
<input type="text" name="lastname" size="15" required/><br>
<label>Course:</label>
<select name="course" required>
<option value="">Select Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select><br>
<label>Gender:</label><br>
<input type="radio" name="gender" value="Male" required/> Male<br>
<input type="radio" name="gender" value="Female"/> Female<br>
<input type="radio" name="gender" value="Other"/> Other<br><br>
<label>Phone:</label>
<input type="text" name="phone" size="10" maxlength="10" required/><br>

<label>Address:</label><br>
<textarea cols="50" rows="5" name="address" required></textarea><br>

<label>Email:</label>
<input type="email" id="email" name="email" required/><br>

<label>Password:</label>
<input type="password" id="pass" name="pass" required/><br>

<label>Re-type password:</label>
<input type="password" id="repass" name="repass" required/><br><br>

<input type="button" value="Submit"onclick="displaySuccessMessage()"/>


</div>
</form>
</div>
<script src="new.js"></script>
</body>
</html>

JAVASCRIPT :

function validateForm() {
var firstname = document.forms["registrationForm"]["firstname"].value;
var lastname = document.forms["registrationForm"]["lastname"].value;
var course = document.forms["registrationForm"]["course"].value;
var gender = document.querySelector('input[name="gender"]:checked');
var phone = document.forms["registrationForm"]["phone"].value;
var address = document.forms["registrationForm"]["address"].value;
var email = document.forms["registrationForm"]["email"].value;
var pass = document.forms["registrationForm"]["pass"].value;
var repass = document.forms["registrationForm"]["repass"].value;

if (firstname == "" || lastname == "" || course == "" || !gender || phone ==


"" || address == "" || email == "" || pass == "" || repass == "") {
alert("All fields must be filled out");
return false;
}

if (pass !== repass) {


alert("Passwords do not match");
return false;
}
return true;
}
function displaySuccessMessage(){
alert('Registered Successfully!!\n' +'Current Date : '+ getCurrentDate());
}
function getCurrentDate(){
var today= new Date();
var date= today.getDate() + '-' +( today.getMonth() +1 ) + '-' + today.getFullYear();
return date;
}

OUTPUT:

You might also like