How to do Validation with angular JS/ionic Framework

ionic-v1
41

I think @malixsys missed to add validation for select tag. I am trying to add validation for it but couldn’t fix it. Looking for suggestions.

42

I spent a few minutes on this. It’s not very pretty but you can see that it works. Mainly a few CSS changes.

You’ll need to deal with any styling changes yourself. I’m terrible at that stuff.

Also, see my comments about the original validation Gist. That function needs to be taken out of the for loop.

1 Like
43

Searching for “Ionic Validation” got me into this thread.

How to enable default HTML5 form validation in Ionic?

See screencast: http://quick.as/gq8vir11

My code is super-simple:

<!DOCTYPE html>
<html>
<head>
  <script src="ionic.bundle.js"></script>

  <script>
    var app = angular.module("app", []);

    app.controller("ctrl", function($scope) {
      $scope.login = function() {
        console.log("Login: " + $scope.email + " " + $scope.password);
      }
    });
  </script>

</head>
<body ng-app="app" ng-controller="ctrl">

  <form ng-submit="login()">
    <input required ng-model="email" type="email" placeholder="email">
    <input required ng-model="password" type="password" placeholder="password">
    <input type="submit" value="Log in using your email">
  </form>

</body>
</html>

(If you replace ionic.bundle.js with angular.js then it will work as expected)

Thanks!

1 Like
44

Default HTML5 validation will not enough all in all in your app.
Like safari does not support many input types (like url or email).

You can style invalid inputs with the angular classes (ng-dirty ng-invalid) and add form validation texts via myForm.formField.$error.xxx.

And you do not want to show the browser default styled messages in an app.
It looks ugly and totally not fit an ordinary app behavior.
If i install a new app on my android device and i see such info boxes i will cry^^.

Ionic is for mobile hybrid apps not for pc’s.

Greets, bengtler.

45

@bengtler - very true.

Excuse my ignorance, I wasn’t aware of that.

Thanks for great explanation, I should get acquainted with the combination of:

  • .ng-dirty
  • .ng-invalid
  • .ng-pristine

(makes sense)

Michal

EDIT: Just to expand a little bit:

(helpful, easy to digest resources)

46

@zwz sorry, just saw this, style.css must be AFTER ionic.css :smile:

47

Hi,
I really like this solution to validate a form. Just one thing is missing for my usecase. I need to set the form back to prestine state (meaning potentially error/success marks should be removed) in some cases. What would be the best way to achive this? With “normal” angular validation I just used

$scope.myFormName.$setPristine();

So in that case the class “has-success” or “has-error” should be removed form the label.

Thx

48

I tried your solution.I am not able to call the function doLogin() from on-valid-submit.
Please if u can guide me to right direction.

49

Hey @dhruvAks would you mind paste your code or codepen?

50

it is the same as given by @Calendee

51

This validation doesn’t seem to work in latest version of ionic css v1.0.0-beta.14.

Problems:

  1. border-left & right doesn’t change to green after successful validation.
  2. textarea, select controls doesn’t hide the error icon even after entering data. This is the same in plunker posted by @Calendee (but in this example problem is only with textarea).

Help would be very much appreciated.

52

@sai_sharvan The newest Ionic Framework beta uses AngularJS 1.3.5. This release of Angular made the workaround here obsolete. The new version automatically includes a $submitted property to the form after it’s submitted.

Here’s a working example : http://codepen.io/calendee/pen/OPRzLy

Notice that the Username field is invalid until the user fills it out properly. The Password field is not marked invalid until the user tries to submit the form.

Notice also that the password field uses different styling than the username field.

1 Like
53

Here’s a blog post to explain all this in more detail : http://calendee.com/2014/12/26/validation-in-ionic-framework-apps-with-ngmessages/

4 Likes
54

Great !!! This works perfectly fine. Thanks

55

Thank you so much for this @Calendee !

56

Great post @Calendee, I love it! Great adaptation of my original validation! I will steal it… Maybe I will put it in a for or label directive… :smile:

57

Hey @malixsys, I’m worried you think I was stealing your idea. In that post about Angular validation with ng-messages, I did link to this original thread. In this thread from the early days (wow - it’s been a while), I clearly noted that I was adapting work you had already done. I was not trying to take any credit for anything - just sharing knowledge - which is what makes the Ionic Framework community awesome.

Just to be clear - Thanks! Your idea was great and I’ve used it ever since. I’ve updated my blog entry to reflect this.

58

@Calendee : Oh no Justin, I was genuinely happy! That’s what open source is all about!! :smile:
As I said, I’m gonna use your additional original ideas in my project, too!
Thanks for the props though!
FWIW I tweeted about your post :smiley:

Also, maybe they belong in a “for” or “label” directive?

59

Glad to hear it. Thought I’d inadvertently stepped on some toes!

60

Hi, as an alternative I would like to suggest using Angular-auto-validate: http://jonsamwell.github.io/angular-auto-validate/

The error messages are dynamic, so for example for max/min length the message replaces the numeric values, without having to declare each message on every field, in fact the HTML template would be clean for any validation/error markups, just the form fields. Additionally the controller no longer requires to validate the form’s state, because the library won’t let the form to be submitted.

It even supports i18n, message customization and validation onBlur or onChange (default).

Although this library was developed to be use with Bootstrap or Fundation, I have a working example with Ionic here: http://codepen.io/gvarela/pen/KwJdEN

Hope it helps :smile: