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.
You can use form or ng-form directive combined with ng-messages directive to avoid mixing jquery with angular
Example
Source https://docs.angularjs.org/api/ngMessages/directive/ngMessages