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 Time required Property
The HTML DOM Input Time required property controls whether a time input field must be filled out before the form can be submitted. This property returns or sets a boolean value indicating if the time field is mandatory.
Syntax
Following is the syntax for returning the required property −
inputTimeObject.required
Following is the syntax for setting the required property −
inputTimeObject.required = booleanValue
Parameters
The booleanValue parameter accepts the following values −
| Value | Description |
|---|---|
| true | The time field is required and must be filled before form submission. |
| false | The time field is optional (default value). |
Return Value
The property returns a boolean value − true if the time input is required, false otherwise.
Example − Checking Required Status
Following example demonstrates how to check if a time input field is required −
<!DOCTYPE html>
<html>
<head>
<title>Input Time Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<fieldset style="padding: 15px; border: 1px solid #ccc;">
<legend>Meeting Schedule</legend>
<label for="meetingTime">Select Time:</label>
<input type="time" id="meetingTime" required>
<button type="button" onclick="checkRequired()">Check Required Status</button>
<p id="result"></p>
</fieldset>
</form>
<script>
function checkRequired() {
var timeInput = document.getElementById("meetingTime");
var result = document.getElementById("result");
if (timeInput.required) {
result.textContent = "Time field is required";
result.style.color = "red";
} else {
result.textContent = "Time field is optional";
result.style.color = "green";
}
}
</script>
</body>
</html>
The output displays whether the time field is required or optional −
Time field is required (in red text)
Example − Setting Required Property Dynamically
Following example shows how to toggle the required property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Time Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<fieldset style="padding: 15px; border: 1px solid #ccc;">
<legend>Appointment Booking</legend>
<label for="appointmentTime">Appointment Time:</label>
<input type="time" 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>
</fieldset>
</form>
<script>
var timeInput = document.getElementById("appointmentTime");
var status = document.getElementById("status");
function makeRequired() {
timeInput.required = true;
status.textContent = "Time field is now required";
status.style.color = "red";
}
function makeOptional() {
timeInput.required = false;
status.textContent = "Time field is now optional";
status.style.color = "green";
}
function checkStatus() {
if (timeInput.required) {
status.textContent = "Current status: Required";
status.style.color = "red";
} else {
status.textContent = "Current status: Optional";
status.style.color = "green";
}
}
</script>
</body>
</html>
The buttons allow you to dynamically change and check the required status of the time input field.
Example − Form Validation with Required Time
Following example demonstrates form validation using the required property −
<!DOCTYPE html>
<html>
<head>
<title>Time Required Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<fieldset style="padding: 15px; border: 1px solid #ccc;">
<legend>Meeting Scheduler</legend>
<label for="meetingTime">Meeting Time:</label>
<input type="time" id="meetingTime" required>
<br><br>
<button type="button" onclick="validateAndSubmit()">Schedule Meeting</button>
<p id="message"></p>
</fieldset>
</form>
<script>
function validateAndSubmit() {
var timeInput = document.getElementById("meetingTime");
var message = document.getElementById("message");
if (timeInput.required && timeInput.value === '') {
message.textContent = "Please select a meeting time before scheduling.";
message.style.color = "red";
} else if (timeInput.value !== '') {
message.textContent = "Meeting scheduled at: " + timeInput.value;
message.style.color = "green";
} else {
message.textContent = "No time specified (field is optional).";
message.style.color = "blue";
}
}
</script>
</body>
</html>
When the "Schedule Meeting" button is clicked without selecting a time, it displays an error message. When a time is selected, it confirms the scheduled meeting time.
Without time: "Please select a meeting time before scheduling." (red) With time: "Meeting scheduled at: 14:30" (green)
Key Points
Following are the important points to remember about the Input Time required property −
-
The property is both readable and writable, allowing you to check or modify the required status.
-
When
requiredistrue, the browser will prevent form submission if the time field is empty. -
The default value is
false, making the time field optional unless explicitly set to required. -
This property works with HTML5 form validation and triggers the browser's built-in validation messages.
Conclusion
The HTML DOM Input Time required property provides control over whether time input fields are mandatory for form submission. By setting this property to true, you can ensure users must select a time before the form can be processed, enhancing data validation and user experience.
202 Views
