Scribd
Upload
11 views

HTML form validation

The document discusses HTML form validation using JavaScript, emphasizing client-side validation for improved user experience. It provides examples of integrating JavaScript with HTML forms, accessing form elements, and validating various input types such as text fields, emails, passwords, checkboxes, radio buttons, and dropdowns. A complete example of a registration form with multiple validation functions is also included, highlighting the importance of ensuring all inputs meet specified criteria before submission.

Uploaded by

Elizabeth Gomez
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
11 views

HTML form validation

The document discusses HTML form validation using JavaScript, emphasizing client-side validation for improved user experience. It provides examples of integrating JavaScript with HTML forms, accessing form elements, and validating various input types such as text fields, emails, passwords, checkboxes, radio buttons, and dropdowns. A complete example of a registration form with multiple validation functions is also included, highlighting the importance of ensuring all inputs meet specified criteria before submission.

Uploaded by

Elizabeth Gomez
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/ 6

HTML Form Validation Using JavaScript

Form validation ensures that users enter the correct data in a web form before submitting it.
Validation can be done on the client side using JavaScript or on the server side using backend
programming languages. Client-side validation improves user experience by providing
immediate feedback, reducing unnecessary server requests.

1. Integrating JavaScript with HTML Forms

JavaScript can be integrated into an HTML form using:

Inline event handlers (inside HTML attributes)

JavaScript functions (using onclick, onsubmit, etc.)

External JavaScript files (.js files linked with <script> tag)

Example of JavaScript Integration in an HTML Form

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<script src="validation.js"></script> <!-- External JavaScript File -->
</head>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br><br>

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

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

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


</form>
<script>
function validateForm() {
let name = document.forms["myForm"]["name"].value;
let email = document.forms["myForm"]["email"].value;
let password = document.forms["myForm"]["password"].value;

if (name == "") {
alert("Name must be filled out");
return false;
}
if (email == "") {
alert("Email must be filled out");
return false;
}
if (password.length < 6) {
alert("Password must be at least 6 characters long");
return false;
}
return true;
}
</script>
</body>
</html>

The onsubmit event in the <form> tag calls the validateForm() function.

The function retrieves input values and checks conditions.

If a validation rule fails, an alert is shown, and return false; prevents form submission.

---

2. Accessing HTML Elements Using JavaScript

JavaScript provides different ways to access form elements:

Methods to Access Elements

Example

let nameValue = document.getElementById("name").value;


let emailValue = document.forms["myForm"]["email"].value;
console.log(nameValue, emailValue);

---

3. Validating Different HTML Elements

Here’s how to validate different form inputs:

a) Text Field Validation

Ensure it's not empty.

Check for minimum and maximum length.

function validateTextField() {
let name = document.getElementById("name").value;
if (name.trim() === "") {
alert("Name is required.");
return false;
}
if (name.length < 3) {
alert("Name must be at least 3 characters.");
return false;
}
return true;
}

b) Email Validation

Check if the email follows the correct format using a regex pattern.

function validateEmail() {
let email = document.getElementById("email").value;
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
alert("Invalid email format.");
return false;
}
return true;
}
c) Password Validation

Ensure the password has at least 6 characters, includes numbers, and special characters.

function validatePassword() {
let password = document.getElementById("password").value;
let passwordPattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&*!]).{6,}$/;
if (!passwordPattern.test(password)) {
alert("Password must be at least 6 characters long and include uppercase, lowercase,
number, and special character.");
return false;
}
return true;
}

d) Checkbox Validation

function validateCheckbox() {
let checkbox = document.getElementById("terms");
if (!checkbox.checked) {
alert("You must agree to the terms and conditions.");
return false;
}
return true;
}

e) Radio Button Validation

function validateRadio() {
let gender = document.querySelector('input[name="gender"]:checked');
if (!gender) {
alert("Please select your gender.");
return false;
}
return true;
}

f) Dropdown (Select) Validation

function validateSelect() {
let country = document.getElementById("country").value;
if (country === "Select") {
alert("Please select a country.");
return false;
}
return true;
}

---

4. Full Practice Form Validation

Here's a complete form with multiple validations.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Form Validation</title>
</head>
<body>
<form name="registrationForm" onsubmit="return validateAll()">
<label for="name">Name:</label>
<input type="text" id="name"><br><br>

<label for="email">Email:</label>
<input type="text" id="email"><br><br>

<label for="password">Password:</label>
<input type="password" id="password"><br><br>

<label for="gender">Gender:</label>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female<br><br>

<label for="country">Country:</label>
<select id="country">
<option value="Select">Select</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select><br><br>

<input type="checkbox" id="terms"> I agree to the terms<br><br>


<input type="submit" value="Register">
</form>

<script>
function validateAll() {
return validateTextField() && validateEmail() && validatePassword() && validateRadio()
&& validateSelect() && validateCheckbox();
}
</script>
</body>
</html>

Key Features

Calls multiple validation functions.

Ensures all inputs meet criteria before form submission.

Prevents form submission if validation fails.

---

Conclusion

JavaScript allows real-time client-side form validation.

document.getElementById() and document.forms[] help access form fields.

Use regex for pattern-based validation (e.g., emails, passwords).

Combine multiple validation checks in a single function for better usabi

You might also like