ecture Notes Of Day 24
JavaScript and Forms
Objective:
Understand how to work with forms and implement form
validation using JavaScript.
Introduction
Forms are a crucial part of web
development, allowing users to input data that can be processed by websites.
JavaScript plays a vital role in interacting with forms, enabling developers to
validate user input and provide a better user experience.
By the end of this class,
students will be able to:
- Access
and manipulate form elements using JavaScript.
- Validate
user inputs to ensure correctness.
- Prevent
form submission when the input does not meet the required criteria.
Topics
Covered
1.
Accessing Form Elements
Methods to Access Forms and
Elements
- document.forms:
Returns a collection of all forms in a document.
- form.elements:
Returns all elements inside a specific form.
- getElementById and
querySelector: Useful for accessing specific form elements.
Example:
|
<form
id="loginForm"> <label
for="username">Username:</label> <input
type="text" id="username" name="username"> <label
for="password">Password:</label> <input
type="password" id="password"
name="password"> <button
type="submit">Login</button> </form> <script> // Accessing the form let form =
document.getElementById("loginForm"); // Accessing elements
in the form let username =
form.elements["username"]; let password =
form.elements["password"]; console.log(username.value);
// Logs the value of the username input console.log(password.value);
// Logs the value of the password input </script> |
2.
Validating Form Input
Types of Validation
- Client-side
validation: Done using JavaScript before the form is
submitted to the server.
- Server-side
validation: Performed on the server after form
submission (not covered today).
Common Scenarios for Validation
- Required
fields are not empty.
- Email
addresses are in the correct format.
- Passwords
meet strength requirements.
Example:
|
<label
for="email">Email:</label> <input
type="text" id="email" name="email"> <label
for="age">Age:</label> <input
type="number" id="age" name="age"> <button
type="submit">Register</button> </form> <script> document.getElementById("registrationForm").addEventListener("submit",
function(event) { let email =
document.getElementById("email").value; let age =
document.getElementById("age").value; // Simple
validation if (email ===
"" || age === "") {
alert("All fields are required!");
event.preventDefault(); // Prevent form submission
return; } if
(!email.includes("@")) {
alert("Please enter a valid email address!");
event.preventDefault(); // Prevent form submission } }); </script> |
3.
Preventing Form Submission
Example:
|
<label
for="feedback">Feedback:</label> <textarea
id="feedback" name="feedback"></textarea> <button
type="submit">Submit</button> </form> <script> document.getElementById("feedbackForm").addEventListener("submit",
function(event) { let feedback =
document.getElementById("feedback").value; // Prevent
submission if feedback is empty if
(feedback.trim() === "") {
alert("Feedback cannot be empty!");
event.preventDefault(); } }); </script> |
Hands-On
Activity
Task 1: Create a
form with the following fields:
- Name
(text input)
- Email
(text input)
- Password
(password input)
- Age
(number input)
Objective: Validate
the form with these rules:
1. Name
cannot be empty.
2. Email
must include "@" and a domain.
3. Password
must be at least 6 characters long.
4. Age must
be a positive number.
Hint: Use addEventListener("submit",
function(event) { ... }); for form submission handling.
Summary
- JavaScript
allows dynamic interaction with forms via DOM manipulation.
- Validating
form input improves user experience and data accuracy.
- Use event.preventDefault()
to stop form submission temporarily during validation.
