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 Search required property
The HTML DOM Input Search required property is associated with the required attribute of an <input type="search"> element. This property sets or returns whether a search input field must be filled out before submitting the form. When set to true, the browser prevents form submission if the required search field is left empty.
Syntax
Following is the syntax for setting the required property −
searchObject.required = true|false
Following is the syntax for getting the required property −
var isRequired = searchObject.required;
Property Values
The required property accepts the following boolean values −
true− The search field must be filled out before submitting the formfalse− The search field is optional (default value)
Return Value
The property returns a Boolean value indicating whether the search input field is required (true) or optional (false).
Example − Checking Required Property
Following example demonstrates how to check if a search input field is required −
<!DOCTYPE html>
<html>
<head>
<title>Input Search Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Search Required Property</h2>
<form action="#" onsubmit="return false;">
<label for="fruitSearch">Search Fruits:</label>
<input type="search" id="fruitSearch" name="fruits" required>
<input type="submit" value="Submit">
</form>
<br>
<button onclick="checkRequired()">Check Required Status</button>
<p id="result"></p>
<script>
function checkRequired() {
var searchInput = document.getElementById("fruitSearch");
var isRequired = searchInput.required;
var resultText = isRequired ?
"The search field is required and must be filled before submitting." :
"The search field is optional and can be left blank.";
document.getElementById("result").innerHTML = resultText;
}
</script>
</body>
</html>
The output shows the search field with a submit button. Clicking "Check Required Status" displays whether the field is mandatory −
Search Fruits: [search input field] [Submit] [Check Required Status] After clicking button: The search field is required and must be filled before submitting.
Example − Setting Required Property
Following example shows how to dynamically set the required property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Set Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Toggle Search Field Requirement</h2>
<form action="#" onsubmit="return false;">
<label for="productSearch">Search Products:</label>
<input type="search" id="productSearch" name="products">
<input type="submit" value="Submit">
</form>
<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("productSearch").required = true;
document.getElementById("status").innerHTML = "Search field is now required.";
}
function makeOptional() {
document.getElementById("productSearch").required = false;
document.getElementById("status").innerHTML = "Search field is now optional.";
}
function checkStatus() {
var isRequired = document.getElementById("productSearch").required;
var status = isRequired ? "required" : "optional";
document.getElementById("status").innerHTML = "Search field is currently " + status + ".";
}
</script>
</body>
</html>
The buttons allow you to dynamically change whether the search field is required or optional −
Search Products: [search input field] [Submit] [Make Required] [Make Optional] [Check Status] Status updates based on button clicks: Search field is now required.
Example − Form Validation with Required Search
Following example demonstrates form validation behavior when a search field is required −
<!DOCTYPE html>
<html>
<head>
<title>Required Search Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Form with Required Search Field</h2>
<form id="searchForm">
<label for="citySearch">Search City (Required):</label><br>
<input type="search" id="citySearch" name="city" required placeholder="Enter city name"><br><br>
<label for="countrySearch">Search Country (Optional):</label><br>
<input type="search" id="countrySearch" name="country" placeholder="Enter country name"><br><br>
<input type="submit" value="Submit Form">
</form>
<br>
<div id="message"></div>
<script>
document.getElementById("searchForm").addEventListener("submit", function(event) {
event.preventDefault();
var cityField = document.getElementById("citySearch");
var countryField = document.getElementById("countrySearch");
var message = "Form submitted successfully!<br>";
message += "City field required: " + cityField.required + "<br>";
message += "Country field required: " + countryField.required + "<br>";
message += "City value: '" + cityField.value + "'<br>";
message += "Country value: '" + countryField.value + "'";
document.getElementById("message").innerHTML = message;
});
</script>
</body>
</html>
The form shows validation behavior with required and optional search fields. If the required city field is empty, the browser prevents submission −
Search City (Required): [search field with placeholder] Search Country (Optional): [search field with placeholder] [Submit Form] On successful submission: Form submitted successfully! City field required: true Country field required: false City value: 'New York' Country value: 'USA'
Browser Compatibility
The required property is supported in all modern browsers for search input fields. It works consistently across Chrome, Firefox, Safari, and Edge. The HTML5 form validation is automatically handled by the browser when the required property is set to true.
Conclusion
The HTML DOM Input Search required property provides a simple way to enforce mandatory search field validation. Setting it to true ensures users must enter a search term before form submission, while false makes the field optional. This property integrates seamlessly with browser-native form validation.
180 Views
