ionic framework validation

app.scss

form i.icon.error {
  color: $assertive;
}

form input + i.icon.error {
  display: none;
  margin-left: 8px;
}

form.ng-submitted input.ng-invalid + i.icon.error {
  display: block;
}

form .has-error {
  border-left: 5px solid darken($assertive, 15%);
}

form .has-success {
  border-left: 5px solid darken($energized, 15%);
}

form.ng-submitted input.ng-valid + i.icon.error {
  display: none;
}

directives.js

angular.module('app', [...] )
.directive('onValidSubmit', ['$parse', '$timeout', function($parse, $timeout) {
    return {
      require: '^form',
      restrict: 'A',
      link: function(scope, element, attrs, form) {
        form.$submitted = false;
        var fn = $parse(attrs.onValidSubmit);
        element.on('submit', function(event) {
          scope.$apply(function() {
            element.addClass('ng-submitted');
            form.$submitted = true;
            if (form.$valid) {
              if (typeof fn === 'function') {
                fn(scope, {$event: event});
              }
            }
          });
        });
      }
    }

  }])
  .directive('validated', ['$parse', function($parse) {
    return {
      restrict: 'AEC',
      require: '^form',
      link: function(scope, element, attrs, form) {
        var inputs = element.find("*");
        for(var i = 0; i < inputs.length; i++) {
          (function(input){
            var attributes = input.attributes;
            if (attributes.getNamedItem('ng-model') != void 0 && attributes.getNamedItem('name') != void 0) {
              var field = form[attributes.name.value];
              if (field != void 0) {
                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');
                  }
                });
              }
            }
          })(inputs[i]);
        }
      }
    }
  }])
;

form.html

    <form novalidate="novalidate" on-valid-submit="doLogin()">
    <div class="list card">
      <div class="item item-divider">Enter your info:</div>
      <label class="item item-input validated">
        <span class="input-label">Email</span>
        <input type="text" ng-model="user.email" required="required" name="email">
        <i class="icon ion-alert-circled error"></i>
      </label>
      <label class="item item-input validated">
        <span class="input-label">Password</span>
        <input type="password" ng-model="user.password" name="password" required="required">
        <i class="icon ion-alert-circled error"></i>
      </label>
    </div>
    <div class="padding">
      <button type="submit" class="button icon-right ion-chevron-right button-block button-energized">
        login
      </button>
    </div>
    </form>

see http://plnkr.co/edit/4oTEYmKM5GobbXlL8mrL?p=preview

@malixsys : See this fork. https://gist.github.com/calendee/829df21ea167a1c919da

I pulled the function out of the for loop to prevent creating a function inside a loop. Minor hit but also saves jshint errors.

FYI : Never done gists before; so, don't see a way to do a pull request. Might not be a way.

Thanks for sharing! I needed form validation for a project and finding this solution really helped me.

i put "pattern=".{3,} required" on an input . seems like it dosen't work on pattern validation. This input need a min length validation , is there any way to fix this?

TypeError: Cannot read property 'value' of undefined

Thanks for sharing this. I already did validation according to my need, but they were not working properly. Your validation helped me full-fill what I wanted. Thank you. :-)

Thank you very much! This really helped me!