Scribd
Upload
14 views4 pages

WT Assignment No4

The document outlines an assignment to design a static web page using HTML, JavaScript, and CSS, with a focus on implementing JavaScript validation. It discusses the advantages of JavaScript, including client-side execution and enhanced user experience, and provides a program code example for a user registration form with validation checks. The conclusion emphasizes the importance of data validation in improving data integrity and user experience in web applications.

Uploaded by

yashshinde9273
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views4 pages

WT Assignment No4

The document outlines an assignment to design a static web page using HTML, JavaScript, and CSS, with a focus on implementing JavaScript validation. It discusses the advantages of JavaScript, including client-side execution and enhanced user experience, and provides a program code example for a user registration form with validation checks. The conclusion emphasizes the importance of data validation in improving data integrity and user experience in web applications.

Uploaded by

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

Assignment no.

4
Title: Design static web page using HTML, Javascript and CSS including JS Validation.

Objectives:
1. Design static page using HTML.
2. Apply Javascript to HTML file for validation.
3. Apply CSS to HTML file.

Problem Statement:
Implement an application in Java Script using following:
a) Design UI of application using HTML, CSS etc.
b) Include Java script validation
c) Use of prompt and alert window using Java Script

Theory:
JavaScript is a high-level, dynamic, and interpreted programming language primarily used for
creating dynamic and interactive web pages. It is an essential component of web development
alongside HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). JavaScript
allows developers to add interactive features, dynamic content, and client-side scripting
functionality to web pages, enabling enhanced user experiences.

Advantages of Javascript:

Client-Side Execution: JavaScript runs on the client's browser, reducing server load and
improving performance.

Enhanced User Experience: Enables dynamic and interactive web pages with features like
animations and form validation.

Cross-Browser Compatibility: Supported by all major web browsers, ensuring consistency


across platforms.

Asynchronous Programming: Supports non-blocking code execution, allowing tasks to run


independently for a smoother user experience.

Ease of Learning: Simple syntax and versatility make it accessible for developers of all skill
levels.
Scalability: Suitable for both small scripts and large applications, with modular architecture for
easy scalability.

Validation:
Validation in JavaScript refers to the process of checking user input to ensure it meets specified
criteria or constraints before processing or submitting it. This often involves verifying that data
entered into form fields adheres to predefined rules, such as format, length, or type. JavaScript
validation can be implemented using conditional statements, regular expressions, event handling,
and error messages to provide feedback to users and prevent invalid data from being submitted.
It helps improve data integrity, user experience, and security in web applications.

Conclusion:
Hence we have applied validation on data using Javascript.

Program Code:

User_registration.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration</title>
<style>
.container {
width: 300px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input {
width: calc(100% - 10px);
margin-bottom: 10px;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>User Registration</h2>
<form id="registrationForm" onsubmit="validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required>
<br>
<input type="submit" value="Register">
</form>
</div>

<script src="script.js"></script>

</body>
</html>

script.js

function validateForm() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const age = document.getElementById('age').value;

// Name validation: should not be empty


if (name.trim() === '') {
alert('Please enter your name.');
return false;
}

// Email validation: should not be empty and should be in valid format


if (email.trim() === '') {
alert('Please enter your email address.');
return false;
} else if (!validateEmail(email)) {
alert('Please enter a valid email address.');
return false;
}

// Age validation: should not be empty and should be a positive number


if (age.trim() === '') {
alert('Please enter your age.');
return false;
} else if (isNaN(age) || age <= 0) {
alert('Please enter a valid age.');
return false;
}

// If all validations pass, submit the form


alert('Registration successful!');
return true;
}

function validateEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}

Output:

Paste the output here.

You might also like