I need to validate a url in variable with jQuery, but can't use validate-plugin. Is there a simple way to do this?
Add a comment
|
8 Answers
You can use the same regex that the validation plugin does (updated to latest regex on May 23rd, 2015):
function isUrlValid(url) {
return /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url);
}
var testCases = [
"http://www.google.com/",
"https://www.google.com/",
"ftp://www.google.com/",
"http://google.com/",
"http://google.com",
"https://google.com",
"http://www.google.com:80/",
"https://www.google.com:443/",
"http://127.0.0.1/",
"http://127.0.0.1:9200/",
"www.site.com",
"x:",
"http://",
"javascript:alert('xss')",
"http://w",
"http:",
"derp://www.google.com",
"http://localserver"
], div = document.getElementById("output");
for(var i=0; i < testCases.length; i++) {
var test = testCases[i];
div.innerHTML += (isUrlValid(test) ? "<span class='valid'>valid</span>: " : "<span class='invalid'>invalid</span>: ") + "" + test + "\n";
}.valid { color: green; }
.invalid { color: red; }<pre id="output"></pre>This handles unicode, etc so it's a bit verbose. Source is the validation plugin itself. A few notes: it is probably what you want, but it is not strictly correct. Typically you need to choose a slightly different regex if you want to accept things like http://w and http://localserver which are valid in an intranet environment but not typically allowed in most web forms. In a way, this regex is safer because it requires a FQDN in such cases. Similarly other examples like custom protocols are rejected here, but are valid and do work for many things used today. If you're asking users "what's your homepage?" in a form though...you likely want to exclude these anyway.
Anyone finding this later: please feel free to test additional test cases with the snippet I included and update the answer if you feel a new common case should be mentioned. I re-wrote the answer with the latest regex and in this format to better serve the community.
14 Comments
TheBlackBenzKid
Worked very well. Simple too. Would love it if you can expand the answer to show option for auto adding http:// ?
jnovack
Additionally it accepts "derp://www.google.com" as a valid url.
Nick Craver
@user1063287 those are valid URLs, I can have a server named
w. Only a hostname is not a valid URL.Nick Craver
@jnovack That is a valid URL. URLs are not constrained to only the http and https protocols. Any custom protocol is valid. This is how things like steam links and links between apps on your phone work.
jnovack
I'm going to disagree on a technicality, which was the original intent of my message (sorry I was not clear). 'derp://' is a URI, not a URL.
|
Thank you very much Meo and Nick, I put both your answers together and it works just great.
if(/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i.test($("#url").val())){
alert("valid URL");
} else {
alert("invalid URL");
}
Comments
If you are sure that your audience is using HTML5, you can use type="url" to validate the text string. You could also dynamically create an input element, set the type and test whether the variable is valid URL or not.
The following is based on a blog post from https://www.raymondcamden.com/2016/10/19/using-html-form-validation-in-pure-javascript
var elm;
function isValidURL(u){
if(!elm){
elm = document.createElement('input');
elm.setAttribute('type', 'url');
}
elm.value = u;
return elm.validity.valid;
}
console.log(isValidURL('http://www.google.com/'));
console.log(isValidURL('//google.com'));
console.log(isValidURL('google.com'));
Comments
var url = $('input.surl').val();
var url_validate = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
if(!url_validate.test(url)){
alert('error');
}
else{
alert('success');
}
2 Comments
Amaan warsi
You should use
var keyword before defining url_validate variableAmaan warsi
You're Welcome 😊
yes with a regex:
/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/ix
Comments
Code :
var re = /^(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/;
re.test('http://www.goole.in');
1 Comment
dakab
Some explanation would improve your answer. Also, question was how to validate an URL stored in a variable.
you Want to validate your URL:
Please pass the URL in this function then this will give you true OR false.
See Function :
<script>
function isUrl(s) {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
return regexp.test(s);
}
isUrl(yourURL);
</script>
Comments
Try this
const isValidUrl = urlString=> {
try {
return Boolean(new URL(urlString));
}
catch(e){
return false;
}
}
