ionic errors

example.html

    <form novalidate="novalidate" on-valid-submit="updateUser()">
      <div class="list list-inset">
        <div class="item">
          <h2>{{'edit profile'|i18n}}</h2>
        </div>
        <label class="item item-input validated">
          <span class="input-label">{{ 'full name' | i18n}}:</span>
          <input type="text" ng-model="user.fullname" id="fullname" name="fullname" required="required"
                 ng-pattern="/^[^$%]{3,255}$/"
              />
          <i class="icon ion-alert-circled error"></i>
        </label>

<!-- ... -->

        <div class="item item-icon-left topless" ng-show="hasError('user.fullname')">
          <i class="icon ion-alert-circled error"></i>
          <span>please enter 3 or more characters</span>
        </div>

<!-- ... -->

form.js

'use strict';

angular.module('app')
  .directive('onValidSubmit', ['$parse', '$timeout', 'ModalStatus', function($parse, $timeout, ModalStatus) {
    return {
      require: '^form',
      restrict: 'A',
      link: function(scope, element, attrs, form) {
        var forEachField = function(element, fn) {
          var inputs = element.find('*');
          for (var i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            var attributes = input.attributes;
            if (!!attributes.getNamedItem('ng-model') && !!attributes.getNamedItem('name')) {
              var field = form[input.name];
              if (!!field) {
                var ret = fn(input, field);
                if (ret !== void 0) {
                  return ret;
                }
              }
            }
          }
          return void 0;
        };

        form.$submitted = false;
        var fn = $parse(attrs.onValidSubmit);

        window.setTimeout(function() {
          var input = element.find('input');
          input && input.focus && input.focus();
          console.log('focused');
        }, 600);

        scope.hasError = function(name) {
          if (!name || form.$submitted === false) return false;
          var hasError =
            forEachField(element, function(input, field) {
              if (field.$name === name) {
                return field.$invalid;
              }
            });
          return hasError || false;
        };
        element.on('submit', function(event) {
          forEachField(element, function(input, field) {
            if (input.type === 'checkbox' || input.type === 'hidden') {
              field.$setViewValue(field.$viewValue);
            } else if (input.hasOwnProperty('value')) {
              field.$setViewValue(input.value);
            } else {
              field.$setViewValue(angular.element(input).val());
            }
          });

          scope.$apply(function() {
            element.addClass('ng-submitted');
            form.$submitted = true;
            if (form.$valid) {
              if (typeof fn === 'function') {
                if (ModalStatus.isModalShowing()) return;
                ModalStatus.begin();
                fn(scope, {$event: event});
              }
            }
          });
        });
      }
    };

  }])

 
  .directive('validated', ['$parse', function() {
    var processValidated = function(scope, element, form, input) {
      var attributes = input.attributes;
      if (!!attributes.getNamedItem('ng-model') && !!attributes.getNamedItem('name')) {
        var field = form[attributes.name.value];
        if (!!field) {
          scope.$watch(function() {
            return form.$submitted + '_' + field.$valid;
          }, function() {
            if (form.$submitted !== true) {
              return;
            }
            var inp = angular.element(input);
            if (inp.hasClass('ng-invalid')) {
              element.removeClass('has-success');
              element.addClass('has-error');
            } else {
              element.removeClass('has-error').addClass('has-success');
            }
          });
        }
      }
    };
    return {
      restrict: 'AEC',
      require: '^form',
      link: function(scope, element, attrs, form) {
        var inputs = element.find('*');
        for (var i = 0; i < inputs.length; i++) {
          processValidated(scope, element, form, inputs[i]);
        }
      }
    };
  }])
;