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 pattern Property
The HTML DOM Input URL pattern property sets or returns the regular expression that validates URL input fields. The pattern attribute's value is checked against the text typed in the URL field to ensure it matches the specified format.
Syntax
Following is the syntax for returning the pattern value −
inputURLObject.pattern
Following is the syntax for setting the pattern value −
inputURLObject.pattern = "RegExp"
Parameters
The pattern property accepts a single parameter −
RegExp − A string containing a regular expression that the URL input value must match. If the pattern is not specified, any valid URL format is accepted.
Return Value
The pattern property returns a string representing the regular expression pattern for the URL input field, or an empty string if no pattern is set.
Example − Getting and Setting Pattern
Following example demonstrates how to get and set the pattern property of a URL input field −
<!DOCTYPE html>
<html>
<head>
<title>Input URL Pattern Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>URL Pattern Example</h2>
<label for="URLInput">Enter URL:</label>
<input type="url" id="URLInput" pattern="https://.*\.com$" placeholder="https://example.com">
<br><br>
<button onclick="getPattern()">Get Pattern</button>
<button onclick="setPattern()">Set New Pattern</button>
<button onclick="clearPattern()">Clear Pattern</button>
<p id="result"></p>
<script>
var urlInput = document.getElementById("URLInput");
var result = document.getElementById("result");
// Display initial pattern
result.innerHTML = "Current pattern: " + (urlInput.pattern || "None");
function getPattern() {
result.innerHTML = "Current pattern: " + (urlInput.pattern || "None");
}
function setPattern() {
urlInput.pattern = "https://www\.[a-zA-Z0-9]+\.(com|org|net)$";
result.innerHTML = "Pattern set to: " + urlInput.pattern;
}
function clearPattern() {
urlInput.pattern = "";
result.innerHTML = "Pattern cleared. Current pattern: " + (urlInput.pattern || "None");
}
</script>
</body>
</html>
The example shows how to retrieve the current pattern, set a new pattern, and clear the pattern using JavaScript.
Example − Form Validation with Pattern
Following example demonstrates URL pattern validation in a complete form −
<!DOCTYPE html>
<html>
<head>
<title>URL Pattern Validation</title>
<style>
form {
width: 60%;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
}
label {
display: block;
margin: 10px 0 5px 0;
font-weight: bold;
}
input[type="url"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.info {
background-color: #f0f8ff;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form onsubmit="return validateURL(event)">
<fieldset>
<legend>Website URL Validation</legend>
<label for="websiteURL">Website URL:</label>
<input type="url" id="websiteURL"
pattern="https?://www\.[a-zA-Z0-9-]+\.(com|org|net|edu)$"
placeholder="https://www.example.com" required>
<div class="info" id="patternInfo"></div>
<input type="submit" value="Submit URL">
</fieldset>
</form>
<script>
var urlInput = document.getElementById("websiteURL");
var patternInfo = document.getElementById("patternInfo");
// Display pattern information
patternInfo.innerHTML = "<strong>Pattern:</strong> " + urlInput.pattern +
"<br><strong>Requirements:</strong> URL must start with http:// or https://, " +
"contain www., and end with .com, .org, .net, or .edu";
function validateURL(event) {
event.preventDefault();
if (urlInput.checkValidity()) {
alert("Valid URL submitted: " + urlInput.value);
return true;
} else {
alert("Please enter a valid URL matching the required pattern.");
return false;
}
}
</script>
</body>
</html>
This example shows a form that validates URLs against a specific pattern. The browser automatically checks the pattern when the form is submitted.
Example − Dynamic Pattern Updates
Following example demonstrates changing URL patterns dynamically based on user selection −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic URL Pattern</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic URL Pattern Validation</h2>
<label for="domainType">Select domain type:</label>
<select id="domainType" onchange="updatePattern()">
<option value="any">Any domain</option>
<option value="com">.com only</option>
<option value="edu">.edu only</option>
<option value="secure">HTTPS only</option>
</select>
<br><br>
<label for="dynamicURL">Enter URL:</label>
<input type="url" id="dynamicURL" placeholder="Enter URL here">
<br><br>
<button onclick="checkCurrentPattern()">Check URL</button>
<div id="status" style="margin-top: 10px; padding: 10px; border-radius: 4px;"></div>
<script>
var domainSelect = document.getElementById("domainType");
var urlInput = document.getElementById("dynamicURL");
var status = document.getElementById("status");
function updatePattern() {
var selectedType = domainSelect.value;
var newPattern = "";
switch(selectedType) {
case "com":
newPattern = "https?://.*\.com$";
break;
case "edu":
newPattern = "https?://.*\.edu$";
break;
case "secure":
newPattern = "https://.*";
break;
default:
newPattern = "";
}
urlInput.pattern = newPattern;
status.innerHTML = "<strong>Current pattern:</strong> " + (newPattern || "No pattern (any valid URL)");
status.style.backgroundColor = "#e8f4f8";
}
function checkCurrentPattern() {
if (urlInput.value === "") {
status.innerHTML = "Please enter a URL first.";
status.style.backgroundColor = "#ffeeee";
return;
}
if (urlInput.checkValidity()) {
status.innerHTML = "? URL matches the current pattern: " + urlInput.value;
status.style.backgroundColor = "#eefff0";
} else {
status.innerHTML = "? URL does not match the current pattern.";
status.style.backgroundColor = "#ffeeee";
}
}
// Initialize
updatePattern();
</script>
</body>
</html>
This example allows users to select different validation patterns and test URLs against them dynamically.
Common URL Patterns
Following are some commonly used URL patterns for different validation requirements −
| Pattern Type | Regular Expression | Description |
|---|---|---|
| Basic HTTPS | https://.* |
Requires HTTPS protocol |
| Specific Domain |
300 Views
