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 required Property
The HTML DOM Input Number required property sets or returns whether a number input field must be filled out before submitting the form. This property corresponds to the HTML required attribute and enables client-side form validation.
Syntax
Following is the syntax for returning the required property −
object.required
Following is the syntax for setting the required property −
object.required = true | false
Property Values
The required property accepts the following boolean values −
true − The number input field is required and must be filled before form submission.
false − The number input field is optional (default value).
Return Value
The property returns a boolean value indicating whether the number input field is required (true) or not (false).
Example − Getting the Required Property
Following example demonstrates how to check if a number input field is required −
<!DOCTYPE html>
<html>
<head>
<title>Get Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Check Required Property</h2>
<form>
<label>Age: <input type="number" id="ageInput" required></label><br><br>
<button type="button" onclick="checkRequired()">Check if Required</button>
</form>
<p id="result"></p>
<script>
function checkRequired() {
var input = document.getElementById("ageInput");
var isRequired = input.required;
document.getElementById("result").textContent =
"Input field is required: " + isRequired;
}
</script>
</body>
</html>
The output shows whether the input field has the required property set −
Input field is required: true
Example − Setting the Required Property
Following example shows how to dynamically set or remove the required property −
<!DOCTYPE html>
<html>
<head>
<title>Set Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Toggle Required Property</h2>
<form>
<label>Enter a number: <input type="number" id="numberInput"></label><br><br>
<button type="button" onclick="makeRequired()">Make Required</button>
<button type="button" onclick="makeOptional()">Make Optional</button>
<button type="submit">Submit</button>
</form>
<p id="status"></p>
<script>
function makeRequired() {
var input = document.getElementById("numberInput");
input.required = true;
document.getElementById("status").textContent = "Input is now required";
}
function makeOptional() {
var input = document.getElementById("numberInput");
input.required = false;
document.getElementById("status").textContent = "Input is now optional";
}
</script>
</body>
</html>
Click "Make Required" to enforce validation, or "Make Optional" to remove the requirement. Try submitting the form in both states to see the difference.
Example − Form Validation with Required Property
Following example demonstrates practical form validation using the required property −
<!DOCTYPE html>
<html>
<head>
<title>Form Validation Example</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="number"] {
width: 200px; padding: 8px; border: 2px solid #ddd;
border-radius: 4px;
}
input[type="number"]:invalid { border-color: #ff6b6b; }
input[type="number"]:valid { border-color: #51cf66; }
button {
padding: 10px 20px; margin-right: 10px;
border: none; border-radius: 4px; cursor: pointer;
}
.submit-btn { background-color: #007bff; color: white; }
.toggle-btn { background-color: #6c757d; color: white; }
.status {
margin-top: 15px; padding: 10px; border-radius: 4px;
background-color: #f8f9fa;
}
</style>
</head>
<body>
<h2>User Registration Form</h2>
<form id="userForm">
<div class="form-group">
<label for="ageInput">Age:</label>
<input type="number" id="ageInput" min="18" max="100" required>
</div>
<button type="button" class="toggle-btn" onclick="toggleRequired()">
Toggle Required
</button>
<button type="submit" class="submit-btn">Submit Form</button>
</form>
<div class="status" id="statusDiv">
Age field is currently: <span id="requiredStatus">Required</span>
</div>
<script>
function toggleRequired() {
var ageInput = document.getElementById("ageInput");
var statusSpan = document.getElementById("requiredStatus");
ageInput.required = !ageInput.required;
statusSpan.textContent = ageInput.required ? "Required" : "Optional";
statusSpan.style.color = ageInput.required ? "#dc3545" : "#28a745";
}
document.getElementById("userForm").addEventListener("submit", function(e) {
e.preventDefault();
var ageInput = document.getElementById("ageInput");
if (ageInput.required && !ageInput.value) {
alert("Please enter your age before submitting.");
} else {
alert("Form submitted successfully!");
}
});
</script>
</body>
</html>
This example shows a registration form where the age field validation can be toggled dynamically. The input border changes color based on validation state, and form submission is handled with custom JavaScript validation.
Browser Compatibility
The HTML DOM Input Number required property is supported in all modern browsers that support HTML5 form validation, including Chrome, Firefox, Safari, Edge, and Opera. For older browsers, JavaScript validation should be implemented as a fallback.
Conclusion
The required property provides a convenient way to control form validation for number input fields dynamically. It returns a boolean value indicating the current required state and can be set to true or false to enforce or remove validation requirements. This property works seamlessly with HTML5's built-in form validation features.
194 Views
