Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Range Overflow and Range Underflow properties in JavaScript.
In JavaScript, the rangeOverflow and rangeUnderflow properties are part of the ValidityState object, used to check if form input values exceed their specified ranges.
Range Underflow
The rangeUnderflow property returns true if the element's value is less than the value specified in the min attribute.
Range Overflow
The rangeOverflow property returns true if the element's value is greater than the value specified in the max attribute.
Syntax
element.validity.rangeOverflow // true if value > max element.validity.rangeUnderflow // true if value < min
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Range Validation Example</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
margin-top: 10px;
padding: 10px;
border-radius: 4px;
}
.valid { background-color: #d4edda; color: #155724; }
.invalid { background-color: #f8d7da; color: #721c24; }
input {
padding: 8px;
margin: 10px 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Range Overflow and Range Underflow Validation</h1>
<div>
<label>Enter a number between 0 and 20:</label>
<input type="number" class="num" min="0" max="20" step="1">
<button class="btn">CHECK RANGE</button>
</div>
<div class="result"></div>
<script>
const resultEle = document.querySelector(".result");
const numEle = document.querySelector('.num');
document.querySelector(".btn").addEventListener("click", () => {
if (numEle.validity.rangeOverflow) {
resultEle.innerHTML = 'Number exceeds the maximum range (20)';
resultEle.className = 'result invalid';
}
else if (numEle.validity.rangeUnderflow) {
resultEle.innerHTML = 'Number is below the minimum range (0)';
resultEle.className = 'result invalid';
}
else if (numEle.value !== '') {
resultEle.innerHTML = 'Number is within the valid range';
resultEle.className = 'result valid';
}
else {
resultEle.innerHTML = 'Please enter a number';
resultEle.className = 'result';
}
});
</script>
</body>
</html>
How It Works
The validation process checks the input value against the min and max attributes:
- If value < 0:
rangeUnderflowistrue - If value > 20:
rangeOverflowistrue - If 0 ? value ? 20: Both properties are
false
Key Points
- These properties only work with input elements that have
minandmaxattributes - They are part of the HTML5 Constraint Validation API
- Both properties return
falsewhen the value is within the valid range - Empty inputs typically don't trigger range validation
Conclusion
The rangeOverflow and rangeUnderflow properties provide an easy way to validate numeric input ranges in JavaScript. They're essential for creating robust form validation without writing complex comparison logic.
Updated on: 2026-03-15T23:18:59+05:30
811 Views
Advertisements