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 Week required Property
The HTML DOM Input Week required property sets or returns whether a week input field must be filled out before submitting a form. When set to true, the browser will prevent form submission until the user selects a valid week value.
Syntax
Following is the syntax to return the required property −
inputWeekObject.required
Following is the syntax to set the required property −
inputWeekObject.required = booleanValue
Return Value
The property returns a boolean value indicating whether the week input field is required (true) or not (false).
Boolean Values
The booleanValue can be one of the following −
| Value | Description |
|---|---|
true |
The week field is required and must be filled before form submission. |
false |
The week field is optional (default value). |
Example − Getting the Required Property
Following example demonstrates how to get the current value of the required property −
<!DOCTYPE html>
<html>
<head>
<title>Input Week Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Week Input Required Property</h3>
<label for="week1">Required Week:</label>
<input type="week" id="week1" required>
<br><br>
<label for="week2">Optional Week:</label>
<input type="week" id="week2">
<br><br>
<button onclick="checkRequired()">Check Required Status</button>
<p id="result"></p>
<script>
function checkRequired() {
var week1 = document.getElementById("week1");
var week2 = document.getElementById("week2");
document.getElementById("result").innerHTML =
"First week input required: " + week1.required + "<br>" +
"Second week input required: " + week2.required;
}
</script>
</body>
</html>
The output displays the required status of both week input fields −
First week input required: true Second week input required: false
Example − Setting the Required Property
Following example shows how to dynamically set the required property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Setting Week Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Toggle Week Input Required Status</h3>
<form>
<label for="examWeek">Examination Week:</label>
<input type="week" id="examWeek">
<br><br>
<button type="button" onclick="makeRequired()">Make Required</button>
<button type="button" onclick="makeOptional()">Make Optional</button>
<button type="submit">Submit Form</button>
<br><br>
<p id="status"></p>
</form>
<script>
var weekInput = document.getElementById("examWeek");
var statusDisplay = document.getElementById("status");
function makeRequired() {
weekInput.required = true;
updateStatus();
}
function makeOptional() {
weekInput.required = false;
updateStatus();
}
function updateStatus() {
statusDisplay.textContent = "Week input required: " + weekInput.required;
}
// Display initial status
updateStatus();
</script>
</body>
</html>
When you click "Make Required", the week field becomes mandatory for form submission. When set to optional, the form can be submitted without selecting a week.
Week input required: false (Changes to true/false based on button clicks)
Example − Form Validation with Required Week
Following example demonstrates form validation behavior with a required week input −
<!DOCTYPE html>
<html>
<head>
<title>Week Required Validation</title>
<style>
.container {
max-width: 500px;
margin: 20px auto;
padding: 20px;
font-family: Arial, sans-serif;
}
.form-group {
margin: 15px 0;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="week"] {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 200px;
}
button {
padding: 10px 15px;
margin: 5px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.submit-btn {
background-color: #007bff;
color: white;
}
.toggle-btn {
background-color: #28a745;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h3>Registration Form</h3>
<form id="registrationForm">
<div class="form-group">
<label for="startWeek">Course Start Week:</label>
<input type="week" id="startWeek" required>
</div>
<button type="submit" class="submit-btn">Register</button>
<button type="button" class="toggle-btn" onclick="toggleRequired()">Toggle Required</button>
</form>
<p id="message"></p>
</div>
<script>
var form = document.getElementById("registrationForm");
var weekInput = document.getElementById("startWeek");
var message = document.getElementById("message");
form.addEventListener("submit", function(e) {
e.preventDefault();
if (weekInput.required && weekInput.value === "") {
message.textContent = "Please select a start week before submitting.";
message.style.color = "red";
} else {
message.textContent = "Form submitted successfully! Week: " + (weekInput.value || "Not specified");
message.style.color = "green";
}
});
function toggleRequired() {
weekInput.required = !weekInput.required;
message.textContent = "Week input required: " + weekInput.required;
message.style.color = "blue";
}
</script>
</body>
</html>
This example shows how the browser's built-in validation works with required week inputs. When required is true, the form cannot be submitted without selecting a week value.
Conclusion
The HTML DOM Input Week required property provides an easy way to control form validation for week input fields. Setting it to true ensures users must select a week value before form submission, while false makes the field optional. This property works seamlessly with the browser's built-in form validation system.
178 Views
