How to do Validation with angular JS/ionic Framework

ionic-v1
61

@malixsys @Calendee

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.

62

@venkatpolisetti, this works:

63

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.

65

#=================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
66

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.

67

It happens because of the ionic bundle version. Do you have an update for the latest version.

68

Hard to tell… Do you have a jsFiddle or Plunkr woth your code?

69

I used the same code. It’s working for the bundle version you have used. But for the latest version it’s not working. Ionic Version 1 latest version. If you can please check it out and give me a solution.

70

A quick and very easy enhancement you can implement in your application is in the realm of form validation. Best practice says that you should always validate user inputted data via the back-end and I agree.it can make improvements to your user experience.AngularJS ships with its own validators that work great in Ionic Framework mobile apps.