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

As of Angular 1.3, it's relatively easy now that you can completely overwrite existing $validators:

myApp.directive('input', function() {
    function link(scope, element, attrs, ngModel) {
        function allowSchemelessUrls() {
            // Match Django's URL validator, which allows schemeless urls.
            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;

            // Silently prefixes schemeless URLs with 'http://' when 
            // converting a view value to model value.    
            ngModel.$parsers.unshift(function(value) {
                if (!URL_REGEXP.test(value) && URL_REGEXP.test('http://' + value)) {
                    return 'http://' + value;
                } else {
                    return value;
                }
            });

            ngModel.$validators.url = function(value) {
                return ngModel.$isEmpty(value) || URL_REGEXP.test(value);
            };
        }

        if (ngModel && attrs.type === 'url') {
            allowSchemelessUrls();
        }
    }

    return {
        require: '?ngModel',
        link: link
    };
});

Answer 2

You can use the ng-pattern attribute to strengthen the pattern used for validation. (I haven't seen a way to weaken the pattern used--perhaps this is a good thing though.)

Answer 3

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.

<input type="url" validate-web-address ng-model="DummyClass.WebAddress" class="form-control" id="webaddress" placeholder="Web Address" />