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 DatetimeLocal required Property
The HTML DOM Input DatetimeLocal required property determines whether a datetime-local input field must be filled out before submitting a form. When set to true, the browser will prevent form submission if the field is empty and display a validation message.
Syntax
Following is the syntax for getting the required property value −
inputDatetimeLocalObject.required
Following is the syntax for setting the required property −
inputDatetimeLocalObject.required = booleanValue
Return Value
The property returns a boolean value −
true− The datetime-local field is required and must be filled before form submission.false− The datetime-local field is optional (default behavior).
Parameters
The booleanValue parameter accepts the following values −
| Value | Description |
|---|---|
| true | Makes the datetime-local field required for form submission |
| false | Makes the datetime-local field optional (default value) |
Example − Getting Required Property
Following example demonstrates how to check if a datetime-local input field is required −
<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Registration</h2>
<form>
<label for="eventTime">Select Event Time:</label>
<input type="datetime-local" id="eventTime" required>
<br><br>
<button type="button" onclick="checkRequired()">Check If Required</button>
<p id="result"></p>
</form>
<script>
function checkRequired() {
var datetimeInput = document.getElementById("eventTime");
var isRequired = datetimeInput.required;
document.getElementById("result").innerHTML =
"Is datetime field required? " + isRequired;
}
</script>
</body>
</html>
The output shows whether the datetime-local field is required −
Is datetime field required? true
Example − Setting Required Property
Following example shows how to dynamically set the required property −
<!DOCTYPE html>
<html>
<head>
<title>Set DatetimeLocal Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Appointment Booking</h2>
<form>
<label for="appointmentTime">Appointment Time:</label>
<input type="datetime-local" id="appointmentTime">
<br><br>
<button type="button" onclick="makeRequired()">Make Required</button>
<button type="button" onclick="makeOptional()">Make Optional</button>
<button type="button" onclick="checkStatus()">Check Status</button>
<p id="status"></p>
</form>
<script>
var datetimeInput = document.getElementById("appointmentTime");
function makeRequired() {
datetimeInput.required = true;
document.getElementById("status").innerHTML = "Field is now required";
}
function makeOptional() {
datetimeInput.required = false;
document.getElementById("status").innerHTML = "Field is now optional";
}
function checkStatus() {
var status = datetimeInput.required ? "Required" : "Optional";
document.getElementById("status").innerHTML = "Current status: " + status;
}
</script>
</body>
</html>
The buttons allow you to toggle the required property and check the current status −
Current status: Optional (initially) Field is now required (after clicking "Make Required")
Example − Form Validation with Required Property
Following example demonstrates form validation using the required property −
<!DOCTYPE html>
<html>
<head>
<title>DatetimeLocal Required Validation</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
}
input {
padding: 8px;
margin: 5px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.error {
color: red;
font-weight: bold;
}
.success {
color: green;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form>
<fieldset>
<legend>Examination Slot Booking</legend>
<label for="examSlot">Select Examination Date & Time:</label>
<br>
<input type="datetime-local" id="examSlot" required>
<br><br>
<button type="button" onclick="validateAndConfirm()">Confirm Slot</button>
<div id="message"></div>
</fieldset>
</form>
<script>
function validateAndConfirm() {
var datetimeInput = document.getElementById("examSlot");
var messageDiv = document.getElementById("message");
if (datetimeInput.required && datetimeInput.value === "") {
messageDiv.innerHTML = "<p class='error'>Please select a valid examination slot. This field is required.</p>";
} else if (datetimeInput.value !== "") {
var selectedDateTime = new Date(datetimeInput.value);
messageDiv.innerHTML = "<p class='success'>Examination slot confirmed for: " +
selectedDateTime.toLocaleString() + "</p>";
}
}
</script>
</body>
</html>
The form validates the required datetime-local field and shows appropriate success or error messages −
Error: Please select a valid examination slot. This field is required. Success: Examination slot confirmed for: 12/15/2023, 2:30:00 PM
Browser Compatibility
The required property for datetime-local inputs is supported in modern browsers including Chrome, Firefox, Safari, and Edge. However, older browsers may not support the datetime-local input type itself, falling back to a text input.
Conclusion
The HTML DOM Input DatetimeLocal required property provides client-side validation for datetime-local form fields. Setting it to true ensures users must select a date and time before submitting the form, while false makes the field optional. This property enhances user experience by providing immediate feedback for incomplete forms.
165 Views
