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 Month required Property
The HTML DOM Input Month required property is used to set or return whether a month input field must be filled out before submitting a form. This property corresponds to the HTML required attribute and provides client-side validation for month input elements.
Syntax
Following is the syntax for getting 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 month input field is required and must be filled before form submission
- false − The month input field is optional (default value)
Return Value
It returns a boolean value indicating whether the month input field is required (true) or not (false).
Getting the Required Property
Following example demonstrates how to check if a month 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>
<label for="month1">Select Month (Required):</label>
<input type="month" id="month1" required>
<br><br>
<label for="month2">Select Month (Optional):</label>
<input type="month" id="month2">
<br><br>
<button onclick="checkRequired()">Check Required Status</button>
<p id="result"></p>
<script>
function checkRequired() {
var month1 = document.getElementById("month1");
var month2 = document.getElementById("month2");
var result = "Month 1 Required: " + month1.required + "<br>";
result += "Month 2 Required: " + month2.required;
document.getElementById("result").innerHTML = result;
}
</script>
</body>
</html>
The output shows the required status of both month inputs −
Month 1 Required: true Month 2 Required: false
Setting the Required Property
Following example shows how to dynamically set the required property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Set Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamically Set Required Property</h2>
<label for="birthMonth">Birth Month:</label>
<input type="month" id="birthMonth">
<br><br>
<button onclick="makeRequired()">Make Required</button>
<button onclick="makeOptional()">Make Optional</button>
<button onclick="checkStatus()">Check Status</button>
<br><br>
<p id="status"></p>
<script>
function makeRequired() {
document.getElementById("birthMonth").required = true;
document.getElementById("status").innerHTML = "Month input is now required.";
}
function makeOptional() {
document.getElementById("birthMonth").required = false;
document.getElementById("status").innerHTML = "Month input is now optional.";
}
function checkStatus() {
var isRequired = document.getElementById("birthMonth").required;
document.getElementById("status").innerHTML = "Required status: " + isRequired;
}
</script>
</body>
</html>
This example allows you to toggle the required property and check its current status dynamically.
Form Validation Example
Following example demonstrates form validation using the required property −
<!DOCTYPE html>
<html>
<head>
<title>Month Required Form Validation</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.form-group { margin-bottom: 15px; }
.error { color: red; font-weight: bold; }
.success { color: green; font-weight: bold; }
input { padding: 8px; margin: 5px 0; }
button { padding: 10px 15px; background: #007bff; color: white; border: none; cursor: pointer; }
</style>
</head>
<body>
<h2>Employee Registration Form</h2>
<form onsubmit="return validateForm(event)">
<div class="form-group">
<label for="joinMonth">Month of Joining *</label><br>
<input type="month" id="joinMonth" required>
</div>
<div class="form-group">
<label for="reviewMonth">Next Review Month</label><br>
<input type="month" id="reviewMonth">
</div>
<button type="submit">Submit Form</button>
</form>
<div id="message"></div>
<script>
function validateForm(event) {
event.preventDefault();
var joinMonth = document.getElementById("joinMonth");
var message = document.getElementById("message");
if (joinMonth.required && joinMonth.value === "") {
message.innerHTML = "<p class='error'>Please select the month of joining!</p>";
return false;
}
message.innerHTML = "<p class='success'>Form submitted successfully!</p>";
return true;
}
</script>
</body>
</html>
This form validates that the required month field is filled before allowing submission. The first field is required while the second is optional.
Browser Support
The input month required property is supported in modern browsers that support the HTML5 month input type. Note that some older browsers may not fully support the month input type and will fall back to a text input.
Conclusion
The HTML DOM Input Month required property provides an easy way to enforce client-side validation for month input fields. It can be both retrieved to check the current state and modified dynamically using JavaScript to control form validation behavior based on user interactions or application logic.
150 Views
