Scribd
Upload
34 views8 pages

Ex No:4 Date:: Design A Registration Form and Perform Form Validation Using Javascript

The document describes designing a registration form and performing form validation using JavaScript. It details fields to validate including name, password, email, and phone number. It provides code for the HTML registration form and JavaScript validation functions.

Uploaded by

Srisanth
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
34 views8 pages

Ex No:4 Date:: Design A Registration Form and Perform Form Validation Using Javascript

The document describes designing a registration form and performing form validation using JavaScript. It details fields to validate including name, password, email, and phone number. It provides code for the HTML registration form and JavaScript validation functions.

Uploaded by

Srisanth
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/ 8

EX NO:4 DATE:

DESIGN A REGISTRATION FORM AND PERFORM FORM VALIDATION USING


JAVASCRIPT
AIM:
To write a JavaScript program validate the following fields of the Registration page. Add CSS
to customize the properties of the font of the capital (color, bold and font size).
1) Name (Name should contains alphabets and the length should not be less than 6 characters)
2) Password (Password should not be less than 6 characters length)
3) E-mail id (should not contain any invalid and must follow the standard pattern
[email protected])
4) Phone Number (Phone number should contain 10 digits only)
PROCEDURE:
1) Start the program by opening the Notepad.
2) If a form field is empty, the required attribute prevents this form.
3) Client side validation is performed by a web browser, before input is sent to a web server.
4) All JavaScript variables must be identified with unique names.
5) If an input field contains invalid data, display a message
CODING:
MAIN.HTML:

<!DOCTYPE html>

<html>

<head>

<title>Login Check</title>

<style>

header {

text-align:center;

height: 100px;

background-color: rgba(28, 199, 218, 0.685);

padding: 10px;

border-radius: 10px 10px 0px 0px;

}
footer {

text-align:center;

font-size: 12px;

height: 50px;

line-height: 50px;

background-color: rgba(28, 199, 218, 0.685);

padding: 10px;

border-radius: 10px;

</style>

<script type="text/javascript">

function check_login()

var usr, pwd, username, password;

username = "srisanth";

password = "srisanth12";

usr = document.getElementById("txtusr").value;

pwd = document.getElementById("txtpwd").value;

if(usr == username && pwd == password)

window.location.href = "java.html";

else

alert("Invalid Username/Password");

}
</script>

</head>

<body>

<header>

<h1>Username Password Validation</h1>

</header>

<hr>

<table>

<tr>

<td>Username:</td>

<td><input type="text" id="txtusr" name="txtusr"></td>

</tr>

<tr>

<td>Password:</td>

<td><input type="password" id="txtpwd" name="txtpwd"></td>

</tr>

<tr>

<td colspan="2"><input type="button" value="Login" onclick="check_login()"></td>

</tr>

</table>

<footer>

Developed by srisanth

</footer>

</body>

</html>
MAIN.HTML
PAGE
JAVA.HTML:

<!DOCTYPE html>

<html>

<head>

<title>Homepage</title>

<style>

header {

text-align:center;

height: 100px;

background-color: rgba(28, 199, 218, 0.685);

padding: 10px;

border-radius: 10px 10px 0px 0px;

footer {

text-align:center;

font-size: 12px;

height: 50px;

line-height: 50px;

background-color: rgba(28, 199, 218, 0.685);

padding: 10px;

border-radius: 10px;

}</style>

</head>

<body>

<header>

<h1>Welcome</h1>

</header> <hr>

<h1>Login Successful</h1>

<footer>
Developed by Srisanth</footer>

</body>

</html>
JAVA.HTML PAGE:

RESULT:
Thus the program executed and verified and successfully

You might also like