What is Data Validation in
JavaScript?
Data validation in JavaScript means checking user input in a webpage
before it is processed or saved.
Prevents Wrong Data
Ensures Correct Format
Protects the Website
Makes Forms Error-Free
JavaScript validates data instantly on the browser (client-side validation).
D Types of Data Validation in JavaScript
1 2
Presence Check Length Check
Ensures fields are not empty. Verifies the number of characters.
3 4
Range Check Format Check
Confirms values are within min/max limits. Validates patterns like email or phone numbers.
5 6
Numeric Check Dropdown/List & Password Validation
Ensures only digits are entered. Specific checks for selections and secure inputs.
ð 1. Presence Check (Field
Cannot Be Empty)
This validation ensures that a required input field is not left blank by the user.
<!DOCTYPE html>
<html>
<body>
Name: <input id="name">
<button onclick="validateName()">Submit</button>
<p id="result"></p>
<script>
function validateName() {
let name = [Link]("name").value;
if (name === "") {
[Link]("result").innerHTML = "Name cannot be
empty!";
} else {
[Link]("result").innerHTML = "Valid Name";
}
}
</script>
</body>
</html>
ó 2. Length Check (Phone Must Be 10 Digits)
This check verifies that the input string meets a specific character count, like a 10-digit phone number.
<!DOCTYPE html>
<html>
<body>
Phone: <input id="phone">
<button onclick="validatePhone()">Check</button>
<p id="output"></p>
<script>
function validatePhone() {
let p = [Link]("phone").value;
if ([Link] === 10 && !isNaN(p)) {
[Link]("output").innerHTML = "Valid Phone Number";
} else {
[Link]("output").innerHTML = "Invalid Phone Number";
}
}
</script>
</body>
</html>
ò 3. Range Check (Age 13
120)
Ensures that a numerical input falls within a predefined minimum and
maximum value.
<!DOCTYPE html>
<html>
<body>
Age: <input id="age" type="number">
<button onclick="validateAge()">Verify</button>
<p id="msg"></p>
<script>
function validateAge() {
let age = [Link]("age").value;
if (age >= 1 && age <= 120) {
[Link]("msg").innerHTML = "Valid Age";
} else {
[Link]("msg").innerHTML = "Invalid Age";
}
}
</script>
</body>
</html>
ô 4. Format Check (Email
Validation)
Validates that the input matches a specific pattern, commonly used for email
addresses or other structured data.
<!DOCTYPE html>
<html>
<body>
Email: <input id="email">
<button onclick="validateEmail()">Check</button>
<p id="r"></p>
<script>
function validateEmail() {
let email = [Link]("email").value;
if ([Link]("@") && [Link](".")) {
[Link]("r").innerHTML = "Valid Email";
} else {
[Link]("r").innerHTML = "Invalid Email";
}
}
</script>
</body>
</html>
ï 5. Numeric Check (Only Digits Allowed)
This validation ensures that the input consists solely of numerical digits, preventing text or special characters.
<!DOCTYPE html>
<html>
<body>
Enter marks: <input id="marks">
<button onclick="checkMarks()">OK</button>
<p id="res"></p>
<script>
function checkMarks() {
let m = [Link]("marks").value;
if (!isNaN(m)) {
[Link]("res").innerHTML = "Valid Number!";
} else {
[Link]("res").innerHTML = "Only digits allowed!";
}
}
</script>
</body>
</html>
{ Perfect 6-Point Definition
(Use in Exam)
Data validation in JavaScript is the process of checking user input on a
webpage using JavaScript to ensure the data is correct, complete,
logical, and acceptable before sending it to the server.
This definition highlights the key aspects of client-side validation
for robust web applications.