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 URL required Property
The HTML DOM Input URL required property sets or returns whether a URL input field must be filled out before submitting a form. When set to true, the browser will prevent form submission if the URL field is empty and display a validation message.
Syntax
Following is the syntax for returning the required property value −
inputURLObject.required
Following is the syntax for setting the required property −
inputURLObject.required = booleanValue
Property Values
The booleanValue can be one of the following −
| Value | Description |
|---|---|
true |
The URL input field is required and must be filled before form submission. |
false |
The URL input field is optional (default value). |
Return Value
Returns a Boolean value indicating whether the URL input field is required (true) or optional (false).
Example − Getting the Required Property
Following example demonstrates how to check if a URL input field is required −
<!DOCTYPE html>
<html>
<head>
<title>Input URL Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label for="website">Website URL: </label>
<input type="url" id="website" required>
<br><br>
<button type="button" onclick="checkRequired()">Check if Required</button>
</form>
<p id="result"></p>
<script>
function checkRequired() {
var urlInput = document.getElementById("website");
var isRequired = urlInput.required;
document.getElementById("result").innerHTML = "URL field required: " + isRequired;
}
</script>
</body>
</html>
The output shows whether the URL field is required −
URL field required: true
Example − Setting the Required Property
Following example shows how to dynamically set the required property −
<!DOCTYPE html>
<html>
<head>
<title>Set URL Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label for="portfolio">Portfolio URL: </label>
<input type="url" id="portfolio" placeholder="https://example.com">
<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>
</form>
<p id="status"></p>
<script>
var urlInput = document.getElementById("portfolio");
function makeRequired() {
urlInput.required = true;
document.getElementById("status").innerHTML = "URL field is now required";
}
function makeOptional() {
urlInput.required = false;
document.getElementById("status").innerHTML = "URL field is now optional";
}
function checkStatus() {
var status = urlInput.required ? "required" : "optional";
document.getElementById("status").innerHTML = "URL field is currently " + status;
}
</script>
</body>
</html>
The buttons allow you to toggle the required status and check the current state of the URL input field.
Example − Form Validation with Required URL
Following example demonstrates form validation using the required property −
<!DOCTYPE html>
<html>
<head>
<title>URL Required Validation</title>
<style>
form {
max-width: 400px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
.error { color: red; font-weight: bold; }
.success { color: green; font-weight: bold; }
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form>
<fieldset>
<legend>Website Registration</legend>
<label for="siteUrl">Website URL: </label>
<input type="url" id="siteUrl" required placeholder="https://yoursite.com">
<br><br>
<button type="button" onclick="validateForm()">Submit</button>
</fieldset>
</form>
<div id="message"></div>
<script>
function validateForm() {
var urlInput = document.getElementById("siteUrl");
var messageDiv = document.getElementById("message");
if (urlInput.required && urlInput.value.trim() === '') {
messageDiv.innerHTML = '<p class="error">Error: URL is required!</p>';
} else if (urlInput.value.trim() !== '') {
messageDiv.innerHTML = '<p class="success">Success: Form submitted with URL: ' + urlInput.value + '</p>';
} else {
messageDiv.innerHTML = '<p class="success">Success: Form submitted (URL optional)</p>';
}
}
</script>
</body>
</html>
The form validation checks if the required URL field is filled before allowing submission. If empty, it displays an error message; otherwise, it shows a success message with the entered URL.
When empty: Error: URL is required! When filled: Success: Form submitted with URL: https://example.com
Browser Compatibility
The Input URL required property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. The HTML5 URL input type provides built-in validation for URL format when the required attribute is set.
Conclusion
The HTML DOM Input URL required property provides a simple way to enforce URL input validation in forms. Setting it to true makes the field mandatory, while false makes it optional. This property works seamlessly with browser-native form validation to improve user experience.
158 Views
