TypeError: Cannot read property 'init' of null at angular-validator.js:143

[wardprogrammer]

I'm using AngularJS v1.3.15 and I've included following on my html document
<script src="~/App/angular-validator.js"></script>
<script src="~/App/angular-validator-rules.js"></script>

This is what's in there in App.js

angular.module('App ', [
         'ui.router',
         'ngAnimate',          
         'validator', 'validator.rules',             
         'User'
]).config(['$validatorProvider', function ($validatorProvider) {

    $validatorProvider.register('requiredSubmit', {
        validator: /^.+$/,
        error: 'This field is required.'
    });
    $validatorProvider.register('requiredBlur', {
        invoke: 'blur',
        validator: /^.+$/,
        error: 'This field is required.'
    });
    $validatorProvider.register('numberSubmit', {
        validator: /^[-+]?[0-9]*[\.]?[0-9]*$/,
        error: 'This field should be number.'
    });

}]).run(function ($validator) {

    return $validator.register('requiredRun', {
        invoke: 'watch',
        validator: /^.+$/,
        error: 'This field is requrired.'
    });
});

This is what i've on User.js

angular
.module('User.Account', ['ngSanitize', 'ui.bootstrap', 'dialogs.main', 'ui.router'])
.controller('Account', Account);

Account.$inject = ['$scope', '$rootScope', '$timeout', '$state', '$location', '$http', '$log', '$sce', 'dialogs', 'logger', '$validator', 'deserializer', 'AccountService'];

function Account($scope, $validator ) {

    $scope.formWatch = {
        required: '',
        regexp: '',
        requiredRun: '',
        number: 100,
        number2: '',
        http: ''
    };


    $scope.formSubmit = {
        required: '',
        regexp: '',
        number: '',
        http: '',
        submit: function () {
            return $validator.validate($scope, 'formSubmit').success(function () {
                return console.log('success');
            }).error(function () {
                return console.log('error');
            }).then(function () {
                return console.log('then');
            });
        },
        reset: function () {
            return $validator.reset($scope, 'formSubmit');
        }
    };

}

When i run the project, it gives me following error

TypeError: Cannot read property 'init' of null
at angular-validator.js:143

typeof rule.init // shows undefined

 if (typeof rule.init === "function") {
                              rule.init(scope, element, attrs, $injector);
}

Please let me know if i'm missing something. I would appreciate any help.

Thanks,
Amit

[DLoT]

Hi Amit, what's your template look like?

$validator.validate($scope, _'formSubmit'_)

formSubmit has to be the form name or a validation group

[wardprogrammer]

Hi,

Thanks for replying, the template is like -

template is https://jsfiddle.net/qbhrk6dq/

Not sure if AngularJS v1.3.15 is causing an issue.

I appreciate your help.

Thanks,
Amit

[DLoT]

Try to give your form a name

<form name="FORM_NAME" class="form-horizontal panel-body">
  <input type="text" ng-model="formSubmit.required" validator="[required]" validator-group="GROUP_NAME">
</form>

and then pass it to the validateFn

$validator.validate($scope, 'FORM_NAME')

or use validator-group on the element and pass the group name to the validatFn

$validator.validate($scope, 'GROUP_NAME')

It's not an Angular 1.3 issue iam using without any problems.

[wardprogrammer]

Hello,

It worked! :) 👍 Thank you so much for your help.

I tried using $validator.validate($scope, 'FORM_NAME') and it didn't work, it doesn't do any validation. But when i use $validator.validate($scope, 'GROUP_NAME') instead, it works for me. Is there any main difference between these two?

Will that also work for radio, select, textarea elements too? Please let me know.

Thanks again.

Amit