Scribd
Upload
3 views

practical 5

Uploaded by

harshitsingh1930
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

practical 5

Uploaded by

harshitsingh1930
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Practical 5

Validation of form fields using JavaScript.


JavaScript validates HTML forms by accessing the form fields and checking their values to ensure
they meet certain criteria, such as format, length, and required conditions.

1. Accessing Form Elements

JavaScript uses the document.getElementById, document.getElementsByName, or document.querySelector


methods to access specific form elements by their IDs, names, or CSS selectors.

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


const email = document.querySelector("#email").value;

2. Checking Field Values

JavaScript checks the values of these fields to ensure they meet validation rules:

 Empty Field Check: Ensures required fields are not left blank.
 Pattern Matching: Uses regular expressions to validate formats, such as email addresses or
phone numbers.
 Length Check: Ensures text or password fields meet minimum and maximum length
requirements.
 Custom Conditions: Checks if values meet specific criteria, such as matching passwords.

3. Using onsubmit Event to Trigger Validation

We can prevent form submission by calling a validation function when the form’s onsubmit event
is triggered. If the function returns false, the form will not be submitted.

<form onsubmit="return validateForm()">

4. Displaying Error Messages

If a field fails validation, error messages can be shown near the field. This can be done by modifying
the textContent or innerHTML of elements meant to display errors.

document.getElementById("nameError").textContent = "Name is required.";


Example

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Form Validation</title>
<script src="myscript.js">
</script>
</head>
<body>
<h2>Registration Form</h2>
<form onsubmit="return validateForm()">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>

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

<label for="age">Age:</label><br>
<input type="text" id="age" name="age"><br><br>

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


</form>

</body>
</html>

myscript.js

function validateForm() {
// Get the form elements
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var age = document.getElementById("age").value;
if (name == "") {
alert("Name must be filled out.");
return false;
}

if (email == "") {
alert("Email must be filled out.");
return false;
}

// Check if the Email is in a valid format


var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
alert("Please enter a valid email address.");
return false;
}
if (age == "") {
alert("Age must be filled out.");
return false; }
if (isNaN(age)) {
alert("Age must be a number.");
return false;
}
if (age < 18) {
alert("Age must be at least 18.");
return false;
}

return true;
}

You might also like