@zwz sorry, just saw this, style.css must be AFTER ionic.css 
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
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.
This validation doesn’t seem to work in latest version of ionic css v1.0.0-beta.14.
Problems:
- border-left & right doesn’t change to green after successful validation.
- 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.
@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
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
Great !!! This works perfectly fine. Thanks
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…
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.
@Calendee : Oh no Justin, I was genuinely happy! That’s what open source is all about!!
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 
Also, maybe they belong in a “for” or “label” directive?
Glad to hear it. Thought I’d inadvertently stepped on some toes!
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
I have copied the code from @malixsys ( plunker ) into this Codepen and it does not display the color bars on both sides of the input field.
I may be missing something in this codepen.
Thanks.
It works in the plunker but not in copepen. I copied all the styles and code from your plunker and still does not show those bars on either side of the input fields.
I have also created a sample Ionic app and it is the same there too.
#=================Tutorial================
Form handling in Ionic Framework is straightforward as it gets; On the other hand, form validation is a completely different story. Simple out of the box solution didn’t exist before AngularJS 1.3.0.
As of Angular 1.3.0 we could use a ngMessages module. This module provides enhanced support for displaying messages within templates (typically within forms or when rendering message objects that return key/value data). Instead of relying on JavaScript code and/or complex ng-if statements within your form template to show and hide error messages specific to the state of an input field, the ngMessages and ngMessage directives are designed to handle the complexity, inheritance and priority sequencing based on the order of how the messages are defined in the template.
##Click here to open a tutorial including working examples
In a few short words…
Inject ngMessage into your application:
var nameApp = angular.module('starter', ['ionic', 'ngMessages']);
Lets say this is out form:
<form name="authorizationForm" novalidate="" ng-submit="signIn(authorizationForm)">
<div class="list">
<label class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid, 'no-errors' : authorizationForm.username.$valid}">
<span class="input-label">Username</span>
<input type="text" name="username" ng-model="authorization.username" ng-minlength="5" ng-maxlength="20" required>
</label>
<div class="error-container" ng-show="authorizationForm.username.$error" ng-messages="authorizationForm.username.$error">
<div ng-messages-include="error-list.html"></div>
</div>
<label class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted, 'no-errors' : authorizationForm.password.$valid && authorizationForm.$submitted}">
<span class="input-label">Password</span>
<input type="password" name="password" ng-model="authorization.password" ng-minlength="5" ng-maxlength="20" required>
</label>
<div class="error-container last-error-container" ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error">
<div ng-messages-include="error-list.html"></div>
</div>
</div>
<button class="button button-full button-positive" type="submit">
Sign In
</button>
</form>
as you can see every input field has several checks, for example:
<input type="password" name="password" ng-model="authorization.password" ng-minlength="5" ng-maxlength="20" required>
this is an error list:
<script id="error-list.html" type="text/ng-template">
<div class="error" ng-message="required">
<i class="ion-information-circled"></i>
This field is required!
</div>
<div class="error" ng-message="minlength">
<i class="ion-information-circled"></i>
Minimum length of this field is 5 characters!
</div>
<div class="error" ng-message="maxlength">
<i class="ion-information-circled"></i>
Maximum length of this field is 20 characters!
</div>
</script>
So what’s happening here? If at least one field control is invalid this authorizationForm.username.$invalid property is going to be true. Because it’s true and placed inside a ng-class attribute it will now hold a class name has-errors. This class will style a red bottom border indicating an error in a validation. On the other hand, if field controls are valid it will hold a no-errors class styling bottom border green.
Find more information in a provided link (at the top).Leave me a message if you have more question or if you think something is missing.
1 Like
Hi malixsys. I have a problem here. I used the exact same code in my project and the classes not changed to ''not-empty" when its empty. Therefore color bars works other way round. Do you have any idea about that? When I see the source code class changes correctly but in the console it returns other way round.
Thank you.