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
HTML DOM Input Number min Property
The HTML DOM Input Number min property gets and sets the value of the min attribute of a number input field. This property defines the minimum value that can be entered in a number input element, providing client-side validation for numeric inputs.
Syntax
Following is the syntax for returning the min value −
object.min
Following is the syntax for setting the min value −
object.min = "number"
Parameters
-
number − A string or numeric value representing the minimum allowed value for the input field.
Return Value
Returns a string representing the minimum value of the number input field. If no min attribute is set, it returns an empty string.
Getting the Min Property
Example
Following example demonstrates how to retrieve the min value of a number input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Min Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Minimum Value</h2>
<label for="score">Enter test score (minimum 0):</label>
<input type="number" id="score" min="0" max="100" value="85">
<button onclick="getMin()">Get Min Value</button>
<p id="result"></p>
<script>
function getMin() {
var input = document.getElementById("score");
var minValue = input.min;
document.getElementById("result").textContent = "Minimum value is: " + minValue;
}
</script>
</body>
</html>
The output displays the minimum value of the input field −
Enter test score (minimum 0): [85] [Get Min Value] Minimum value is: 0
Setting the Min Property
Example
Following example shows how to dynamically change the min value of a number input −
<!DOCTYPE html>
<html>
<head>
<title>Set Min Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Min Value</h2>
<label for="quantity">Enter quantity:</label>
<input type="number" id="quantity" min="1" max="50" value="10">
<br><br>
<button onclick="setMin(5)">Set Min to 5</button>
<button onclick="setMin(15)">Set Min to 15</button>
<button onclick="showMin()">Show Current Min</button>
<p id="display"></p>
<script>
function setMin(newMin) {
var input = document.getElementById("quantity");
input.min = newMin;
document.getElementById("display").textContent = "Minimum value set to: " + newMin;
}
function showMin() {
var input = document.getElementById("quantity");
document.getElementById("display").textContent = "Current minimum value: " + input.min;
}
</script>
</body>
</html>
The buttons dynamically change and display the minimum value −
Enter quantity: [10] [Set Min to 5] [Set Min to 15] [Show Current Min] Minimum value set to: 15 (after clicking "Set Min to 15")
Validation with Min Property
Example
Following example demonstrates form validation using the min property −
<!DOCTYPE html>
<html>
<head>
<title>Min Property Validation</title>
<style>
.error { color: red; font-weight: bold; }
.success { color: green; font-weight: bold; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Age Validation</h2>
<label for="age">Enter your age (minimum 18):</label>
<input type="number" id="age" min="18" max="100">
<button onclick="validateAge()">Validate Age</button>
<p id="message"></p>
<script>
function validateAge() {
var ageInput = document.getElementById("age");
var message = document.getElementById("message");
var enteredAge = parseInt(ageInput.value);
var minAge = parseInt(ageInput.min);
if (isNaN(enteredAge)) {
message.className = "error";
message.textContent = "Please enter a valid age.";
} else if (enteredAge < minAge) {
message.className = "error";
message.textContent = "Age must be at least " + minAge + " years.";
} else {
message.className = "success";
message.textContent = "Age is valid: " + enteredAge + " years.";
}
}
</script>
</body>
</html>
The validation checks if the entered age meets the minimum requirement −
Enter your age (minimum 18): [16] [Validate Age] Age must be at least 18 years. (displayed in red) Enter your age (minimum 18): [25] [Validate Age] Age is valid: 25 years. (displayed in green)
Browser Compatibility
The min property is supported in all modern browsers that support HTML5 number input elements, including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. The property provides both client-side validation and programmatic access to the minimum value constraint.
Key Points
-
The min property returns a string value, even when set with a number.
-
Setting min does not automatically validate existing values in the input field.
-
The min property works in conjunction with the max property to define value ranges.
-
Browsers provide built-in validation when forms are submitted, but custom validation gives more control over user experience.
Conclusion
The HTML DOM Input Number min property provides a convenient way to get and set the minimum allowed value for number input fields. It enables dynamic form validation and helps create better user experiences by enforcing numeric constraints programmatically through JavaScript.
171 Views
