Overwriting the AngularJS URL validator

Question

AngularJS accepts this for a valid URL:

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


        

Answer 1

We can create a Directive to validate URL. In this example also added GUI validation response. Added Bootstrap validation Class.

app.directive('validateWebAddress', function () {
    var URL_REGEXP = /^((?:http|ftp)s?:\/\/)(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(?::\d+)?(?:\/?|[\/?]\S+)$/i;
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs, ctrl) {
            element.on("keyup", function () {
                var isValidUrl = URL_REGEXP.test(element.val());
                if (isValidUrl && element.hasClass('alert-danger') || element.val() == '') {
                    element.removeClass('alert-danger');
                } else if (isValidUrl == false && !element.hasClass('alert-danger')) {
                    element.addClass('alert-danger');
                }
            });
        }
    }
});

Use this in your tag. Model is required. So don't forget do define model.