Restrict multiple URLs in Input with jQuery

Written by Saran on March 3, 2013, Updated July 22, 2016

If you want to restrict users from entering more than one or two URL, just use the following jQuery snippet. All we need to do is use RegEx expression and using JavaScript match(), we can search for URL or some other words in textarea.

JQUERY

var allowed = 1; //allowed times
var regex = /https?:\/\/[\-A-Za-z0-9+&@#\/%?=~_|$!:,.;]*/g; //match urls
//var regex = /\b[A-Z0-9._%+-][email protected][A-Z0-9.-]+\.[A-Z]{2,6}\b/ig; //match emails

$('#text').on('input', function() {
	var textArea = $(this).val().match(regex); // search string
	if(textArea && textArea.length > allowed){
		$('#submit').prop("disabled", true);
	}else{
		$('#submit').prop("disabled", false);
	}
});

Notice /g at the end of regular expression? it stands for "Global search" flag and returns multiple matches, without this flag it will return just one match. There are other two more flags : /i(ignore case) and /m (multiline).

Mark Up

Create a textarea and submit button like so:

HTML

<textarea id="text" cols="40" rows="5"></textarea><br />
<button id="submit">Submit</button>

Demo

Try entering multiple URL below, button should be disabled if it finds more than 1 URL.