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 Text required property
The HTML DOM Input Text required property is associated with the required attribute of an <input> element. This property allows you to set or check whether a text field must be filled before form submission. When a required field is left empty, the browser prevents form submission and displays a validation message.
Syntax
Following is the syntax for setting the required property −
textObject.required = true|false
Following is the syntax for getting the required property −
var isRequired = textObject.required;
Property Values
The required property accepts boolean values −
true − The text field must be filled before form submission
false − The text field is optional and can be left empty
Return Value
The property returns a boolean value indicating whether the input field is required (true) or optional (false).
Example − Checking Required Property
Following example demonstrates how to check if a text input field has the required property set −
<!DOCTYPE html>
<html>
<head>
<title>Input Text Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Text Required Property</h2>
<form action="/sample_page.php">
<label for="username">USERNAME:</label>
<input type="text" id="username" name="user_name" required>
<input type="submit" value="Submit">
</form>
<p>Check if the above field is mandatory by clicking the button below:</p>
<button onclick="checkRequired()">CHECK REQUIRED STATUS</button>
<p id="result"></p>
<script>
function checkRequired() {
var isRequired = document.getElementById("username").required;
var resultText = isRequired ?
"The username field must be filled before submitting" :
"The username field is optional";
document.getElementById("result").innerHTML = resultText;
}
</script>
</body>
</html>
The output shows a form with a required username field. Clicking "CHECK REQUIRED STATUS" displays whether the field is mandatory −
Input Text Required Property USERNAME: [text input] [Submit] Check if the above field is mandatory by clicking the button below: [CHECK REQUIRED STATUS] (After clicking: "The username field must be filled before submitting")
Example − Setting Required Property Dynamically
Following example shows how to dynamically set the required property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Required Property</h2>
<form>
<label for="email">EMAIL:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
<p>Control the required status:</p>
<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("email").required = true;
document.getElementById("status").innerHTML = "Email field is now REQUIRED";
}
function makeOptional() {
document.getElementById("email").required = false;
document.getElementById("status").innerHTML = "Email field is now OPTIONAL";
}
function checkStatus() {
var isReq = document.getElementById("email").required;
document.getElementById("status").innerHTML =
"Email field is currently: " + (isReq ? "REQUIRED" : "OPTIONAL");
}
</script>
</body>
</html>
This example allows you to toggle the required status of an email field and check its current state.
Dynamic Required Property EMAIL: [email input] [Submit] Control the required status: [Make Required] [Make Optional] [Check Status] (Status message appears here based on button clicks)
Example − Form Validation with Required Fields
Following example demonstrates how required fields prevent form submission when empty −
<!DOCTYPE html>
<html>
<head>
<title>Required Field Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form</h2>
<form onsubmit="return validateForm()">
<p>
<label for="fname">First Name (Required):</label><br>
<input type="text" id="fname" name="firstname" required>
</p>
<p>
<label for="lname">Last Name (Optional):</label><br>
<input type="text" id="lname" name="lastname">
</p>
<p>
<label for="phone">Phone Number:</label><br>
<input type="tel" id="phone" name="phone">
<button type="button" onclick="togglePhoneRequired()">Toggle Required</button>
</p>
<input type="submit" value="Register">
</form>
<p id="message"></p>
<script>
function togglePhoneRequired() {
var phoneField = document.getElementById("phone");
phoneField.required = !phoneField.required;
document.getElementById("message").innerHTML =
"Phone field is now " + (phoneField.required ? "REQUIRED" : "OPTIONAL");
}
function validateForm() {
document.getElementById("message").innerHTML = "Form submitted successfully!";
return false; // Prevent actual submission for demo
}
</script>
</body>
</html>
The form shows how required validation works. The first name field is required by default, while you can toggle the phone field's required status.
Browser Support
The required property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. The HTML5 required attribute provides built-in client-side validation without requiring additional JavaScript code.
Key Points
The required property corresponds directly to the HTML
requiredattributeSetting
required = trueis equivalent to adding therequiredattribute to the HTML elementBrowser validation messages appear automatically when required fields are empty during form submission
The property can be dynamically changed using JavaScript to adjust form validation rules
Required validation only triggers during form submission, not when the user simply clicks away from the field
Conclusion
The HTML DOM Input Text required property provides a simple way to enforce mandatory field validation in web forms. It can be both checked and modified dynamically using JavaScript, giving developers flexible control over form validation requirements. When set to true, the browser automatically prevents form submission if the field is empty and displays appropriate validation messages to users.
215 Views
