Restrict multiple URLs in Input with jQuery
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
123456789101112
var allowed = 1; //allowed times
var regex = /https?:\/\/[\-A-Za-z0-9+&@#\/%?=~_|$!:,.;]*/g; //match urls
//var regex = /\b[A-Z0-9._%+-]+@[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
123
<textarea id="text" cols="40" rows="5"></textarea>
<button id="submit">Submit</button>Demo
Try entering multiple URL below, button should be disabled if it finds more than 1 URL.
