0% found this document useful (0 votes)

7 views20 pages

week3

The document contains HTML code for three forms: a registration form, a login form, and a catalog search form, each with client-side JavaScript validation. The registration form checks for valid name, email, and phone number formats, while the login form validates email and password requirements. The catalog form ensures that category selection is made, and that price inputs are valid numbers, with additional checks for minimum and maximum price constraints.

Uploaded by

jaganmohan.csd

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

0% found this document useful (0 votes)

7 views20 pages

week3

Uploaded by

jaganmohan.csd

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/ 20

Register.

html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation Example</title>

function validateForm() {

// Get the values of the form fields

var name = document.getElementById("name").value;

var email = document.getElementById("email").value;

var phone = document.getElementById("phone").value;

// Validate name (it should not be empty)

if (name == "") {

alert("Name must be filled out");

return false; // Prevent form submission

// Validate email (basic email format)

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (!email.match(emailPattern)) {

alert("Please enter a valid email address");

return false;

// Validate phone number (basic phone format)

var phonePattern = /^[0-9]{10}$/;

if (!phone.match(phonePattern)) {

alert("Please enter a valid phone number (10 digits)");

return false;

// If everything is fine, allow form submission

return true;

</script>

</head>

<body>

<h2>Client-side Form Validation</h2>

<form onsubmit="return validateForm()">

<input type="text" id="name" name="name">

<label for="email">Email:</label>

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation Example</title>

function validateForm() {

// Get the values of the form fields

var name = document.getElementById("name").value;

var email = document.getElementById("email").value;

var phone = document.getElementById("phone").value;

// Validate name (it should not be empty)

if (name == "") {

alert("Name must be filled out");

return false; // Prevent form submission

// Validate email (basic email format)

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (!email.match(emailPattern)) {

alert("Please enter a valid email address");

return false;

// Validate phone number (basic phone format)

var phonePattern = /^[0-9]{10}$/;

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation Example</title>

function validateForm() {

// Get the values of the form fields

var name = document.getElementById("name").value;

var email = document.getElementById("email").value;

var phone = document.getElementById("phone").value;

// Validate name (it should not be empty)

if (name == "") {

alert("Name must be filled out");

return false; // Prevent form submission

// Validate email (basic email format)

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (!email.match(emailPattern)) {

alert("Please enter a valid email address");

return false;

// Validate phone number (basic phone format)

var phonePattern = /^[0-9]{10}$/;

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation Example</title>

function validateForm() {

// Get the values of the form fields

var name = document.getElementById("name").value;

var email = document.getElementById("email").value;

var phone = document.getElementById("phone").value;

// Validate name (it should not be empty)

if (name == "") {

alert("Name must be filled out");

return false; // Prevent form submission

// Validate email (basic email format)

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (!email.match(emailPattern)) {

alert("Please enter a valid email address");

return false;

// Validate phone number (basic phone format)

var phonePattern = /^[0-9]{10}$/;

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation Example</title>

function validateForm() {

// Get the values of the form fields

var name = document.getElementById("name").value;

var email = document.getElementById("email").value;

var phone = document.getElementById("phone").value;

// Validate name (it should not be empty)

if (name == "") {

alert("Name must be filled out");

return false; // Prevent form submission

// Validate email (basic email format)

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (!email.match(emailPattern)) {

alert("Please enter a valid email address");

return false;

// Validate phone number (basic phone format)

var phonePattern = /^[0-9]{10}$/;

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation Example</title>

function validateForm() {

// Get the values of the form fields

var name = document.getElementById("name").value;

var email = document.getElementById("email").value;

var phone = document.getElementById("phone").value;

// Validate name (it should not be empty)

if (name == "") {
alert("Name must be filled out");

return false; // Prevent form submission

// Validate email (basic email format)

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (!email.match(emailPattern)) {

alert("Please enter a valid email address");

return false;

// Validate phone number (basic phone format)

var phonePattern = /^[0-9]{10}$/;

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation Example</title>

function validateForm() {

// Get the values of the form fields

var name = document.getElementById("name").value;

var email = document.getElementById("email").value;

var phone = document.getElementById("phone").value;

// Validate name (it should not be empty)

if (name == "") {

alert("Name must be filled out");

return false; // Prevent form submission

// Validate email (basic email format)

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (!email.match(emailPattern)) {

alert("Please enter a valid email address");

return false;

// Validate phone number (basic phone format)

var phonePattern = /^[0-9]{10}$/;

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation Example</title>

function validateForm() {

// Get the values of the form fields

var name = document.getElementById("name").value;

var email = document.getElementById("email").value;

var phone = document.getElementById("phone").value;

// Validate name (it should not be empty)

if (name == "") {

alert("Name must be filled out");

return false; // Prevent form submission

}

// Validate email (basic email format)

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (!email.match(emailPattern)) {

alert("Please enter a valid email address");

return false;

// Validate phone number (basic phone format)

var phonePattern = /^[0-9]{10}$/;

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation Example</title>

function validateForm() {

// Get the values of the form fields

var name = document.getElementById("name").value;

var email = document.getElementById("email").value;

var phone = document.getElementById("phone").value;

// Validate name (it should not be empty)

if (name == "") {

alert("Name must be filled out");

return false; // Prevent form submission

}
// Validate email (basic email format)

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (!email.match(emailPattern)) {

alert("Please enter a valid email address");

return false;

// Validate phone number (basic phone format)

var phonePattern = /^[0-9]{10}$/;

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation Example</title>

function validateForm() {

// Get the values of the form fields

var name = document.getElementById("name").value;

var email = document.getElementById("email").value;

var phone = document.getElementById("phone").value;

// Validate name (it should not be empty)

if (name == "") {

alert("Name must be filled out");

return false; // Prevent form submission

}
// Validate email (basic email format)

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (!email.match(emailPattern)) {

alert("Please enter a valid email address");

return false;

// Validate phone number (basic phone format)

var phonePattern = /^[0-9]{10}$/;

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Form Validation Example</title>

function validateForm() {

// Get the values of the form fields

var name = document.getElementById("name").value;

var email = document.getElementById("email").value;

var phone = document.getElementById("phone").value;

// Validate name (it should not be empty)

if (name == "") {

alert("Name must be filled out");

return false; // Prevent form submission

// Validate email (basic email format)

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (!email.match(emailPattern)) {

alert("Please enter a valid email address");

return false;

// Validate phone number (basic phone format)

var phonePattern = /^[0-9]{10}$/;

<input type="email" id="email" name="email">

<label for="phone">Phone (10 digits):</label>

<input type="text" id="phone" name="phone">

<input type="submit" value="Submit">

</form>

</body>

</html>

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login Form Validation</title>

function validateLoginForm() {

// Get the values of the form fields

var email = document.getElementById("email").value;

var password = document.getElementById("password").value;

// Email validation - check if the email field is not empty and matches a valid email format

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

if (email === "") {

alert("Email is required.");

return false; // Prevent form submission

} else if (!email.match(emailPattern)) {

alert("Please enter a valid email address.");

return false; // Prevent form submission

// Password validation - check if the password field is not empty and meets minimum length

if (password === "") {

alert("Password is required.");

return false; // Prevent form submission

} else if (password.length < 6) {

alert("Password must be at least 6 characters long.");

return false; // Prevent form submission

// If all validations pass, allow the form to be submitted

return true;

</script>

</head>

<body>

<h2>Login Page</h2>
<form onsubmit="return validateLoginForm()">

<label for="email">Email:</label>

<input type="email" id="email" name="email" placeholder="Enter your email" required>

<label for="password">Password:</label>

<input type="password" id="password" name="password" placeholder="Enter your password"

required>

<input type="submit" value="Login">

</form>

</body>

</html>

Catalog.html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Catalog Page - Client-Side Validation</title>

function validateCatalogForm() {

// Get the values of the form fields

var category = document.getElementById("category").value;

var minPrice = document.getElementById("minPrice").value;

var maxPrice = document.getElementById("maxPrice").value;

var keyword = document.getElementById("keyword").value;

// Validate category (it should not be empty)

if (category === "") {

alert("Please select a category.");

return false; // Prevent form submission

// Validate minPrice and maxPrice (both should be numbers and minPrice should not be greater
than maxPrice)

if (minPrice !== "" && isNaN(minPrice)) {

alert("Please enter a valid minimum price.");

return false; // Prevent form submission

if (maxPrice !== "" && isNaN(maxPrice)) {

alert("Please enter a valid maximum price.");

return false; // Prevent form submission

if (minPrice !== "" && maxPrice !== "" && parseFloat(minPrice) > parseFloat(maxPrice)) {

alert("Minimum price cannot be greater than maximum price.");

return false; // Prevent form submission

// Validate keyword (optional - just checking if it's empty or not)

if (keyword.length > 0 && keyword.length < 3) {

alert("Keyword must be at least 3 characters long.");

return false; // Prevent form submission

// If everything is valid, allow form submission

return true;
}

</script>

</head>

<body>

<h2>Catalog Search</h2>

<form onsubmit="return validateCatalogForm()">

<label for="category">Category:</label>

<select id="category" name="category">

<option value="">Select a category</option>

<option value="electronics">Electronics</option>

<option value="books">Books</option>

<option value="clothing">Clothing</option>

</select>

<label for="minPrice">Min Price:</label>

<input type="text" id="minPrice" name="minPrice" placeholder="Enter minimum price">

<label for="maxPrice">Max Price:</label>

<input type="text" id="maxPrice" name="maxPrice" placeholder="Enter maximum price">

<label for="keyword">Search Keyword:</label>

<input type="text" id="keyword" name="keyword" placeholder="Enter keyword (optional)">

<input type="submit" value="Search">

</form>
</body>

</html>

Cart.html

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Shopping Cart - Client-Side Validation</title>

function validateCartForm() {

// Get the values of the form fields

var quantities = document.getElementsByClassName("quantity");

var isValid = true;

var invalidFields = [];

// Validate that each quantity is a valid positive number

for (var i = 0; i < quantities.length; i++) {

var quantity = quantities[i].value;

if (quantity === "" || isNaN(quantity) || quantity <= 0) {

invalidFields.push("Quantity for item " + (i + 1));

isValid = false;

// Validate coupon code (optional validation, e.g., must be at least 5 characters)

var couponCode = document.getElementById("coupon").value;

if (couponCode.length > 0 && couponCode.length < 5) {

alert("Coupon code must be at least 5 characters long.");

isValid = false;

// Validate delivery address fields (basic check for empty fields)

var address = document.getElementById("address").value;

var city = document.getElementById("city").value;

var postalCode = document.getElementById("postalCode").value;

if (address === "" || city === "" || postalCode === "") {

alert("Please fill in all the address fields.");

isValid = false;

// If there are any invalid fields, show an alert

if (!isValid) {

alert("Please correct the following issues: \n- " + invalidFields.join("\n- "));

return false; // Prevent form submission

// If everything is valid, allow form submission

return true;

</script>

</head>

<body>

<h2>Shopping Cart</h2>

<form onsubmit="return validateCartForm()">

<label for="item1">Item 1 (Product A)</label>

<input type="number" id="item1" class="quantity" name="item1" value="1" min="1">

</div>

<label for="item2">Item 2 (Product B)</label>

<input type="number" id="item2" class="quantity" name="item2" value="2" min="1">

</div>

<label for="coupon">Coupon Code (optional):</label>

<input type="text" id="coupon" name="coupon" placeholder="Enter coupon code">

<label for="address">Address:</label>

<input type="text" id="address" name="address" placeholder="Enter delivery address">

<input type="text" id="city" name="city" placeholder="Enter city">

<label for="postalCode">Postal Code:</label>

<input type="text" id="postalCode" name="postalCode" placeholder="Enter postal code">

<input type="submit" value="Proceed to Checkout">

</form>

</body>

</html>

SAARC Geophysics Course - Khalid
100% (2)
SAARC Geophysics Course - Khalid
106 pages
web_tech-4_(2)[1]
No ratings yet
web_tech-4_(2)[1]
6 pages
script
No ratings yet
script
3 pages
B - FORM Validation Using Regular Express in JS
No ratings yet
B - FORM Validation Using Regular Express in JS
15 pages
Form Validation in JavaScript
No ratings yet
Form Validation in JavaScript
6 pages
regex
No ratings yet
regex
7 pages
2b 1) Form Validation Using JS.pdf_displayName=2b 1) Form Validation Using JS
No ratings yet
2b 1) Form Validation Using JS.pdf_displayName=2b 1) Form Validation Using JS
12 pages
Java
No ratings yet
Java
2 pages
practical 5
No ratings yet
practical 5
3 pages
ValidForm Major
No ratings yet
ValidForm Major
7 pages
Web App Development Exercise 6
No ratings yet
Web App Development Exercise 6
2 pages
CSS Practical No 12
No ratings yet
CSS Practical No 12
5 pages
DOM Manipulation and Event Handling
No ratings yet
DOM Manipulation and Event Handling
27 pages
course
No ratings yet
course
3 pages
Experiment No - 11 (1)
No ratings yet
Experiment No - 11 (1)
4 pages
Exp-7 & EXP-9
No ratings yet
Exp-7 & EXP-9
25 pages
Web Technologies Fat Exam Codes
No ratings yet
Web Technologies Fat Exam Codes
20 pages
HTML form validation
No ratings yet
HTML form validation
6 pages
JavaScript Form Validation
No ratings yet
JavaScript Form Validation
15 pages
Validation Using Javascript
No ratings yet
Validation Using Javascript
2 pages
SDL-2
No ratings yet
SDL-2
8 pages
Lab 3
No ratings yet
Lab 3
4 pages
L05 Javascript2
No ratings yet
L05 Javascript2
39 pages
13_JS_FormValidation
No ratings yet
13_JS_FormValidation
3 pages
Form Validation Notes-1
No ratings yet
Form Validation Notes-1
5 pages
Form Validation
No ratings yet
Form Validation
3 pages
Javascript Form Validation
No ratings yet
Javascript Form Validation
4 pages
php2 Print
No ratings yet
php2 Print
6 pages
2212046_iwt lab 4)b) (2)
No ratings yet
2212046_iwt lab 4)b) (2)
9 pages
Pract - 11: Javascript Form Validation
No ratings yet
Pract - 11: Javascript Form Validation
5 pages
Lab Sheet 7 - JavaScript Exercises-Online Student Registration - Updated
No ratings yet
Lab Sheet 7 - JavaScript Exercises-Online Student Registration - Updated
4 pages
emailandregex
No ratings yet
emailandregex
1 page
New Text Document
No ratings yet
New Text Document
3 pages
s21 paper solution
No ratings yet
s21 paper solution
4 pages
SDC Week 8
No ratings yet
SDC Week 8
4 pages
Form Validation Using Javascript
No ratings yet
Form Validation Using Javascript
22 pages
Css Exp 12.1 PDF Updated Tuesday
No ratings yet
Css Exp 12.1 PDF Updated Tuesday
3 pages
5-Text Effects, Animations-08!01!2025 (2)
No ratings yet
5-Text Effects, Animations-08!01!2025 (2)
28 pages
WT Assignment No4
No ratings yet
WT Assignment No4
4 pages
Act12
No ratings yet
Act12
4 pages
WebTech (P3)
No ratings yet
WebTech (P3)
4 pages
Form Validations Code
No ratings yet
Form Validations Code
4 pages
Form Validation
No ratings yet
Form Validation
3 pages
Form Validation
No ratings yet
Form Validation
4 pages
Assignment-IV
No ratings yet
Assignment-IV
21 pages
Activity 11
No ratings yet
Activity 11
2 pages
ex3-form validation
No ratings yet
ex3-form validation
4 pages
Java Validation program (1)
No ratings yet
Java Validation program (1)
17 pages
K 10
No ratings yet
K 10
1 page
Form Validation html elements
No ratings yet
Form Validation html elements
7 pages
JavaScript Form Validation Examples
No ratings yet
JavaScript Form Validation Examples
9 pages
Activity11
No ratings yet
Activity11
4 pages
05 HTML Form Validation
No ratings yet
05 HTML Form Validation
10 pages
Saptarshi WEB_TECHNOLOGY PRAC 3
No ratings yet
Saptarshi WEB_TECHNOLOGY PRAC 3
6 pages
Exp 12
No ratings yet
Exp 12
3 pages
Basic JQuery Form Validation Example (2mins) - SitePoint
No ratings yet
Basic JQuery Form Validation Example (2mins) - SitePoint
8 pages
Tutorial J9
No ratings yet
Tutorial J9
8 pages
Lab3 Form Validation
No ratings yet
Lab3 Form Validation
10 pages
Javascript Form Validation Example
No ratings yet
Javascript Form Validation Example
5 pages
Department of Computer Engineering: Develop A Webpage For Validation of Form Fields Using Regular Expressions
No ratings yet
Department of Computer Engineering: Develop A Webpage For Validation of Form Fields Using Regular Expressions
3 pages
Angular Reactive Forms: Everything you need to know
From Everand
Angular Reactive Forms: Everything you need to know
Abdelfattah Ragab
No ratings yet
Chapt4 Part3
No ratings yet
Chapt4 Part3
58 pages
LS 1005 SST PROII Media Filter Brochure
No ratings yet
LS 1005 SST PROII Media Filter Brochure
8 pages
Technical Data Sheet
No ratings yet
Technical Data Sheet
1 page
Armsv25 N1 P1 9
No ratings yet
Armsv25 N1 P1 9
9 pages
Chapter 5: Process Synchronization: Silberschatz, Galvin and Gagne ©2013 Operating System Concepts - 9 Edition
No ratings yet
Chapter 5: Process Synchronization: Silberschatz, Galvin and Gagne ©2013 Operating System Concepts - 9 Edition
74 pages
QTS4.2.1 P112 (EN) 51000-023880-RS 201601 C Web PDF
No ratings yet
QTS4.2.1 P112 (EN) 51000-023880-RS 201601 C Web PDF
112 pages
Christmas Train: Instructions
No ratings yet
Christmas Train: Instructions
18 pages
Puff Snacks Machine LT65 100-150kg Specification
No ratings yet
Puff Snacks Machine LT65 100-150kg Specification
6 pages
Compro - PT Sugiharto Technology Solusindo - PDF
100% (1)
Compro - PT Sugiharto Technology Solusindo - PDF
7 pages
UniFi Quick Guide PDF
No ratings yet
UniFi Quick Guide PDF
2 pages
Topology Optimization of An MBB Beam Using Comsol Multiphysics
No ratings yet
Topology Optimization of An MBB Beam Using Comsol Multiphysics
10 pages
Printed Initials in The Approval Boxes Confirm That The Document Has Been Signed. The Originals Are Held Within Document Management
No ratings yet
Printed Initials in The Approval Boxes Confirm That The Document Has Been Signed. The Originals Are Held Within Document Management
32 pages
Heli-Coil Catalog HC2000 Rev12
No ratings yet
Heli-Coil Catalog HC2000 Rev12
40 pages
Tl943c Header
No ratings yet
Tl943c Header
2 pages
Lennox 2018 Catalogue
0% (1)
Lennox 2018 Catalogue
203 pages
Science - BSC Information Technology - Semester 5 - 2023 - April - Software Project Management Cbcs
No ratings yet
Science - BSC Information Technology - Semester 5 - 2023 - April - Software Project Management Cbcs
2 pages
HIET - Best AME College in India
No ratings yet
HIET - Best AME College in India
3 pages
Grundfosliterature 4588418
No ratings yet
Grundfosliterature 4588418
12 pages
FT-DURABRICK®-AR-HT-A-ASTM
No ratings yet
FT-DURABRICK®-AR-HT-A-ASTM
3 pages
Oracle E-Business Suite Active Directory Integration - Password Synchronization
No ratings yet
Oracle E-Business Suite Active Directory Integration - Password Synchronization
4 pages
CTES - Coiled Tubing Hydraulics Modeling
No ratings yet
CTES - Coiled Tubing Hydraulics Modeling
27 pages
Towards Energy Efficient and Robust Cyber-Physical Systems
No ratings yet
Towards Energy Efficient and Robust Cyber-Physical Systems
22 pages
Curs HPLC
No ratings yet
Curs HPLC
132 pages
RCV-AS-02527-EN - Research Control Valve Model Numbers
No ratings yet
RCV-AS-02527-EN - Research Control Valve Model Numbers
2 pages
AG_AG2008-02_20090306
No ratings yet
AG_AG2008-02_20090306
10 pages
Aa 324-En
No ratings yet
Aa 324-En
3 pages
Nama: Risky Dimas Alfian Kelas: 2C-D4 NIM: 1641420013 Word Families Verb, Noun, Adjective
No ratings yet
Nama: Risky Dimas Alfian Kelas: 2C-D4 NIM: 1641420013 Word Families Verb, Noun, Adjective
3 pages
Parte I
No ratings yet
Parte I
43 pages
Alu Piston PUMP
100% (1)
Alu Piston PUMP
24 pages