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 Textarea required Property
The HTML DOM Textarea required property sets or returns whether a textarea field must be filled out before submitting a form. When set to true, the textarea becomes a mandatory field, and the browser will prevent form submission if it's empty.
Syntax
Following is the syntax for returning the required property −
textareaObject.required
Following is the syntax for setting the required property −
textareaObject.required = true | false
Property Values
The required property accepts the following values −
true − The textarea field is required and must be filled before form submission.
false − The textarea field is optional (default value).
Return Value
The property returns a Boolean value −
trueif the textarea is requiredfalseif the textarea is not required
Example − Getting Required Property
Following example demonstrates how to check if a textarea has the required attribute −
<!DOCTYPE html>
<html>
<head>
<title>Get Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Check Textarea Required Status</h2>
<textarea id="message" rows="4" cols="40" required placeholder="Enter your message"></textarea>
<br><br>
<button onclick="checkRequired()">Check Required Status</button>
<p id="result"></p>
<script>
function checkRequired() {
var textarea = document.getElementById("message");
var isRequired = textarea.required;
document.getElementById("result").innerHTML = "Required: " + isRequired;
}
</script>
</body>
</html>
The output shows the current required status of the textarea −
Required: true
Example − Setting Required Property
Following example shows how to dynamically set the required property −
<!DOCTYPE html>
<html>
<head>
<title>Set Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Toggle Textarea Required Property</h2>
<textarea id="feedback" rows="4" cols="40" placeholder="Enter feedback"></textarea>
<br><br>
<button onclick="makeRequired()">Make Required</button>
<button onclick="makeOptional()">Make Optional</button>
<button onclick="checkStatus()">Check Status</button>
<p id="status"></p>
<script>
function makeRequired() {
document.getElementById("feedback").required = true;
document.getElementById("status").innerHTML = "Textarea is now required";
}
function makeOptional() {
document.getElementById("feedback").required = false;
document.getElementById("status").innerHTML = "Textarea is now optional";
}
function checkStatus() {
var textarea = document.getElementById("feedback");
var status = textarea.required ? "Required" : "Optional";
document.getElementById("status").innerHTML = "Current status: " + status;
}
</script>
</body>
</html>
The buttons allow you to toggle between required and optional states and check the current status.
Example − Form Validation with Required Property
Following example demonstrates practical form validation using the required property −
<!DOCTYPE html>
<html>
<head>
<title>Form Validation with Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Form</h2>
<form id="contactForm" onsubmit="return validateForm(event)">
<label for="name">Name:</label><br>
<input type="text" id="name" required><br><br>
<label for="comments">Comments:</label><br>
<textarea id="comments" rows="4" cols="40" placeholder="Optional comments"></textarea><br><br>
<button type="button" onclick="toggleComments()">Toggle Comments Required</button><br><br>
<button type="submit">Submit Form</button>
</form>
<p id="message" style="color: red;"></p>
<script>
function toggleComments() {
var textarea = document.getElementById("comments");
textarea.required = !textarea.required;
var status = textarea.required ? "required" : "optional";
document.getElementById("message").innerHTML = "Comments field is now " + status;
document.getElementById("message").style.color = textarea.required ? "red" : "green";
}
function validateForm(event) {
event.preventDefault();
var textarea = document.getElementById("comments");
if (textarea.required && textarea.value.trim() === "") {
document.getElementById("message").innerHTML = "Comments field is required!";
document.getElementById("message").style.color = "red";
return false;
}
document.getElementById("message").innerHTML = "Form submitted successfully!";
document.getElementById("message").style.color = "green";
return false;
}
</script>
</body>
</html>
This example shows how the required property affects form submission behavior. When comments are required, the form won't submit if the textarea is empty.
Browser Compatibility
The HTML DOM Textarea required property is supported in all modern browsers −
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Edge | Yes |
| Opera | Yes |
Conclusion
The HTML DOM Textarea required property provides dynamic control over form validation by allowing you to programmatically set whether a textarea field is mandatory. This property returns a Boolean value and can be toggled between true and false to meet changing form requirements during user interaction.
183 Views
