Trying to Validate URL Using JavaScript

user_120397 0
Viewed 183772

I want to validate a URL and display message. Below is my code:

$("#pageUrl").keydown(function(){
        $(".status").show();
        var url = $("#pageUrl").val();

        if(isValidURL(url)){

        $.ajax({
            type: "POST",
            url: "demo.php",
            data: "pageUrl="+ url,
            success: function(msg){
                if(msg == 1 ){
                    $(".status").html('<img src="images/success.gif"/><span><strong>SiteID:</strong>12345678901234456</span>');
                }else{
                    $(".status").html('<img src="images/failure.gif"/>');
                }
            }
            });

            }else{

                    $(".status").html('<img src="images/failure.gif"/>');
            }

    });


function isValidURL(url){
    var RegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;

    if(RegExp.test(url)){
        return true;
    }else{
        return false;
    }
}

My problem is now it will show an error message even when entering a proper URL until it matches regular expression, and it return true even if the URL is something like "http://wwww".

I appreciate your suggestions.

validation url jquery javascript
19 Answers

The URL API can be used to validate the structure of a URL string.

An error is thrown when trying to serialise an invalid URL string into a URL object. This could be abstracted into a helper function (Typescript snippet below):

function isValidURL(URL: string) : boolean {
    try {
        new URL(string);
        return true;
    } catch (err) { return false; }
}

isValidURL('https://www.google.com'); // returns true
isValidURL('localhost:3000'); // returns true
isValidURL('not-a-valid-url'); // returns false
isValidURL('google.com'); // returns false (see footnote)

If you strictly want HTTP / web links to be valid, we can simply add a condition to the return statement:

...
    const url = new URL(string);
    return url.protocol === 'https:' || url.protocol === 'http:';
...

Granted, this approach comes with a few caveats:

  • No support for the URL API in Internet Explorer (could be fixed with a polyfill)
  • Without additional checks, URLs without either a protocol or port are seen as invalid (e.g. google.com is invalid but google.com:3000 is OK). This may be an unintended behaviour for some usecases.
user_171690460
Related