Validating url with jQuery without the validate-plugin?

JqueryUrlValidation

Jquery Problem Overview


I need to validate a url in variable with jQuery, but can't use validate-plugin. Is there a simple way to do this?

Jquery Solutions


Solution 1 - Jquery

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.

Solution 2 - Jquery

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");
}

Solution 3 - Jquery

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'));

Solution 4 - Jquery

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');
}

Solution 5 - Jquery

yes with a regex:

/^(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/ix

Solution 6 - Jquery

> 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>

Solution 7 - Jquery

Code :

var re = /^(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/;
re.test('http://www.goole.in');

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMartti LaineView Question on Stackoverflow
Solution 1 - JqueryNick CraverView Answer on Stackoverflow
Solution 2 - JqueryErsin DemirtasView Answer on Stackoverflow
Solution 3 - JqueryJames MobergView Answer on Stackoverflow
Solution 4 - JqueryAbdo-HostView Answer on Stackoverflow
Solution 5 - JquerymeoView Answer on Stackoverflow
Solution 6 - JqueryVishnu SharmaView Answer on Stackoverflow
Solution 7 - JqueryAkash ManeView Answer on Stackoverflow