How to make a jQuery input validation function work with Angular templates?

Question

I am using a jQuery function to auto-process forms, and show errors just as they occur using jQuery. I am also using Bootstrap 3.

(function() {
    // Form Processing
    $('input').each(function() {
        var $this = $(this);
        $this.on('input', function() {
            if ($this.val().length === 0) {
                if ($this.attr('required')) {
                    $this
                        .parent('div.control-group')
                        .addClass('has-error')
                        .end()
                        .siblings('p.text-danger')
                        .empty()
                        .text('This field is required');
                } else {}
            } else {}
        });
    });
})();

Basically, this checks whether a field is required. If the field is not valid, a simple error message is displayed. It works really nicely too.

Here's a basic template that makes this work:

<div class="control-group>
    <input type="email" required>
    <p class="text-danger"></p>
</div>

However, when I am using Angular templates, the code does not occur, as the DOM is not loaded before hand. I think the right course to action would be to create an Angular directive for this code. I have a few questions regarding that:

Where do I put the derivative? Should it be something like myapp.run?
Am I wrong in my assumption of creating a derivative? Is there a better way to do this so that it works with Angular?

Thanks.

Add a common class(`required`) to all such inputs and then use a delegate. `$(document).on('.required', 'input', function(){...})`. Though if you are using a framework, you should stick to its approach. More you go outside framework's environment to achieve stuff, more your fragile your code becomes — Rajesh, Jan 02 '17 at 08:17
This is completely wrong approach when angular already has built in form validation — charlietfl, Jan 02 '17 at 08:17
Take jQuery and bootstrap.js out of your project and read [Thinking in angular when I have a jQuery background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — charlietfl, Jan 02 '17 at 08:18
@charlietfl - I know, I am using `ng-disabled="form$invalid"`, however, no error message is displayed, so thats what this is for. — darkhorse, Jan 02 '17 at 08:18
why not use the `ng-messages` api? It's built on top of angular validation. And even if you don't use that there is `ng-if`, or `ng-show` — charlietfl, Jan 02 '17 at 08:19
@TahmidKhanNafee I'm not in sync with latest approaches and you will get better solutions but a very traditional approach can be having an error span and there you can use `ng-show="$scope.variableName.length===0"`. — Rajesh, Jan 02 '17 at 08:21
The AngularJS framework uses the [ng-model directive](https://docs.angularjs.org/api/ng/directive/ngModel) for inputs. Any custom validation directives should use the [ng-model Controller API](https://docs.angularjs.org/api/ng/type/ngModel.NgModelController). See [AngularJS Developers Guide - Creating Custom Directives](https://docs.angularjs.org/guide/directive). — georgeawg, Jan 02 '17 at 08:29

score 3 · Accepted Answer · edited Jan 02 '17 at 08:36

You can use form or ng-form directive combined with ng-messages directive to avoid mixing jquery with angular

Example

<form name="myForm">
  <label>
    Enter your name:
    <input type="text"
           name="myName"
           ng-model="name"
           ng-minlength="5"
           ng-maxlength="20"
           required />
  </label>
  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>

Source https://docs.angularjs.org/api/ngMessages/directive/ngMessages

How to make a jQuery input validation function work with Angular templates?

1 Answers1