jQuery Form Validation to Restrict Multiple URL

by Vincy. Last modified on July 12th, 2022.

In jQuery, it is very simple to restrict the user to enter more than one URL via a form input. By validating this, we can avoid spam content with more hyperlinks.

In the previous tutorial, we have seen the jQuery example to validate contact form. In this tutorial, we are using jQuery match() to check the number of URL occurrences.

For this jQuery function, we are passing a regex pattern to find URL match among input string.

View DemoDownload

HTML Text-Area Input

This code shows HTML text area input to the user. After entering text data, the jQuery regex match will be called to check URL occurrences.

jQuery-url-restrict

<textarea id="text-content" cols="80" rows="4"></textarea>
<div>
	<input type="button" name="btnValidate" id="btnValidate" value="Submit" onClick="validate()"/>
	<label id="validation-message"></label>
</div>

jQuery URL Match

The jQuery regex match function will return the number of URLs entered by the user. We are checking for the URLs starts with HTTP://, https:// or FTP://. If the count exceeds 1 then this code will return an error message.

function validate() {
    var num_url_match = $('#text-content').val().toLowerCase().match(/(<a href="([^"]+)">([^$|\s+]*)<\/a>)/g); 	
	if(num_url_match.length > 1) {
        $("#validation-message").html(" More than 1 URL is not allowed.");
		$("#validation-message").css("color","#FF0000");
		$("#text-content").css("border-color","#FF0000");
    } else {
        $("#validation-message").html("");
		$("#validation-message").html(" " +num_url_match.length+ " URL is found.");
		$("#validation-message").css("color","#2FC332");
		$("#text-content").css("border-color","#F0F0F0");
    }
}

View DemoDownload

↑ Back to Top

Share this page