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 Datetime required Property
The HTML DOM Input Datetime required property determines whether a datetime input field must be filled before form submission. When set to true, the browser prevents form submission if the datetime field is empty and displays a validation message.
Syntax
Following is the syntax for getting the required property −
inputDatetimeObject.required
Following is the syntax for setting the required property −
inputDatetimeObject.required = booleanValue
Parameters
The required property accepts a boolean value −
| Value | Description |
|---|---|
true |
Makes the datetime field mandatory for form submission. The browser will show validation messages if empty. |
false |
Default value. The datetime field is optional and can be left empty during form submission. |
Return Value
The property returns a boolean value indicating whether the datetime input is required (true) or optional (false).
Example − Getting the Required Property
Following example demonstrates how to check if a datetime input has the required attribute set −
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Check Datetime Required Status</h2>
<form>
<label for="exam-datetime">Final Exam Datetime:</label>
<input type="datetime" id="exam-datetime" required>
</form>
<button onclick="checkRequired()">Check Required Status</button>
<div id="result"></div>
<script>
function checkRequired() {
var datetimeInput = document.getElementById("exam-datetime");
var isRequired = datetimeInput.required;
document.getElementById("result").innerHTML =
"<p>Datetime field required: <strong>" + isRequired + "</strong></p>";
}
</script>
</body>
</html>
The output shows whether the datetime field is required −
Datetime field required: true
Example − Setting the Required Property
Following example shows how to dynamically toggle the required property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Datetime Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Toggle Datetime Required Status</h2>
<form>
<label for="meeting-datetime">Meeting Datetime:</label>
<input type="datetime" id="meeting-datetime">
<br><br>
<input type="submit" value="Submit">
</form>
<br>
<button onclick="makeRequired()">Make Required</button>
<button onclick="makeOptional()">Make Optional</button>
<button onclick="checkStatus()">Check Status</button>
<div id="status"></div>
<script>
var datetimeInput = document.getElementById("meeting-datetime");
function makeRequired() {
datetimeInput.required = true;
document.getElementById("status").innerHTML =
"<p style='color: red;'>Datetime field is now <strong>required</strong></p>";
}
function makeOptional() {
datetimeInput.required = false;
document.getElementById("status").innerHTML =
"<p style='color: green;'>Datetime field is now <strong>optional</strong></p>";
}
function checkStatus() {
var status = datetimeInput.required ? "required" : "optional";
document.getElementById("status").innerHTML =
"<p>Current status: <strong>" + status + "</strong></p>";
}
</script>
</body>
</html>
The buttons allow you to dynamically change the required status and test form validation behavior.
Example − Form Validation with Required Datetime
Following example demonstrates how the required property affects form submission −
<!DOCTYPE html>
<html>
<head>
<title>Datetime Required Form Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Registration Form</h2>
<form id="event-form">
<label for="event-name">Event Name:</label>
<input type="text" id="event-name" required><br><br>
<label for="event-datetime">Event Datetime:</label>
<input type="datetime" id="event-datetime" required><br><br>
<button type="button" onclick="validateForm()">Validate & Submit</button>
</form>
<div id="validation-result"></div>
<script>
function validateForm() {
var eventName = document.getElementById("event-name");
var eventDatetime = document.getElementById("event-datetime");
var result = document.getElementById("validation-result");
var errors = [];
if (eventName.required && eventName.value.trim() === "") {
errors.push("Event name is required");
}
if (eventDatetime.required && eventDatetime.value === "") {
errors.push("Event datetime is required");
}
if (errors.length > 0) {
result.innerHTML = "<p style='color: red;'>Validation errors:<br>" +
errors.join("<br>") + "</p>";
} else {
result.innerHTML = "<p style='color: green;'>Form is valid! Event: " +
eventName.value + " at " + eventDatetime.value + "</p>";
}
}
</script>
</body>
</html>
This example shows custom validation that checks the required status before allowing form submission.
Browser Compatibility
The required property is supported in all modern browsers. However, the datetime input type has limited support. Most browsers now use datetime-local instead of datetime for better compatibility.
Conclusion
The HTML DOM Input Datetime required property provides both client-side validation and programmatic control over form field requirements. When set to true, it ensures users cannot submit forms with empty datetime fields, improving data quality and user experience through built-in browser validation.
172 Views
