Custom form validation in AngularJS

Question

I have created one custom directive to validate the "domain" name form field.

form field element as

<input type="text" autofocus name="domain" ng-model="user.domain" domain-validate="/^[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" >

custom directive code is

app.directive('domainValidate', function() {
    return {



    // element must have ng-model attribute.
    require: 'ngModel',

    // scope = the parent scope
    // elem = the element the directive is on
    // attr = a dictionary of attributes on the element
    // ctrl = the controller for ngModel.
    link: function(scope, elem, attr, ctrl) {

        //get the regex flags from the regex-validate-flags="" attribute (optional)
        var flags = attr.domainValidateFlags || 'i';

        // create the regex obj.
        var regex = new RegExp(attr.domainValidate, flags);

        // add a parser that will process each time the value is
        // parsed into the model when the user updates it.
        ctrl.$parsers.unshift(function(value) {
            // test and set the validity after update.
            var valid = regex.test(value);
            ctrl.$setValidity('domainValidate', valid);

            // if it's valid, return the value to the model,
            // otherwise return undefined.
            return valid ? value : undefined;
        });

        // add a formatter that will process each time the value
        // is updated on the DOM element.
        ctrl.$formatters.unshift(function(value) {
            // validate.
            console.log(value)
            ctrl.$setValidity('domainValidate', regex.test(value));

            // return the value or nothing will be written to the DOM.
            return value;
        });
    }
    };
});

I want to validate the field on form submit as well on value change.

The above code is not working, please can any one help me what is the error in above code or let me know how to validate the domain name field

thanks

joe · Accepted Answer · 2015-01-09 13:55:04Z

oldish post and i'm noob at angular, but try this

        <form name="userForm" ng-submit="submit()" novalidate>

            <div>
                <input type="text" autofocus name="domain" ng-model="user.domain" domain-validate="^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,63}$" required>
                <div ng-show="userForm.domain.$error.domainValidate">invalid domain</div>
                <div ng-show="userForm.domain.$dirty && userForm.domain.$error.required">required</div>
            </div>

            <button type="submit">Submit</button>

        </form>

then js directive

app.directive('domainValidate', function () {
return {

    require: 'ngModel',
    link: function (scope, elem, attr, ctrl) {

        //get the regex flags from the regex-validate-flags="" attribute (optional)
        var flags = attr.domainValidateFlags || 'i';

        // create the regex obj.
        var regex = new RegExp(attr.domainValidate, flags);

        function setValidity(value) {
            ctrl.$setValidity('domainValidate', regex.test(value));
        }

        scope.$watch(attr.ngModel, function (newValue, oldValue) {
            if (newValue !== undefined && newValue !== oldValue) {
                setValidity(newValue);
            }
        });

        scope.submit = function () {
            setValidity(ctrl.$modelValue);

            for (var error in ctrl.$error) {
                if (ctrl.$error[error]) return;
            }

            // send stuff
        }
    }
};
});

Avag Sargsyan · Accepted Answer · 2016-10-25 11:07:00Z

0

My suggestion is: Instead of custom directive validation use default URL validation:

<input type="url" autofocus name="domain" ng-model="user.domain">

Or if you don't want to use it, share your code in fiddle.

edited Oct 25, 2016 at 11:07

Avag Sargsyan

2,5194 gold badges33 silver badges45 bronze badges

answered Sep 12, 2014 at 10:46

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

1 Comment

rajub Over a year ago

i want to validate domain name like example.com, abc.example.com etc, don't want to validate with http/https

Collectives™ on Stack Overflow

Custom form validation in AngularJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related