Form Validation and input masking in ionic and angularJs

Form Validation Validation Form Input masking ionic

Form Validation and input masking in ionic and angularJs.ionic and angularjs provide directive and javascript function form validation and input masking.

Create a project run this command:

ionic start <project name> --type ionic1

then move inside the newly created directory:

cd <project name>

Input masking js file dowload run this command : 

npm install --save angular-input-masks

Link js form input masking  in index.html

<script src="lib/angular-input-masks/releases/angular-input-masks-standalone.min.js"></script>

Input masking Demo :

Open app.js in www ->js-> app.js and add the module of js file

angular.module('formvalidation', ['ionic', 'starter.controllers', '', 'ui.utils.masks'])

Open home.html in www ->Templates-> home.html and add code

<ion-view view-title="Dashboard">
  <ion-header-bar class="bar-positive">
    <div class="h1 title">Form Validation</div>
  <ion-content class="padding">
    <form name="myForm" novalidate>
        <div class="list">
            <label class="item item-input">
                <span class="input-label">Username</span>
                <input type="email" name="username" ng-model="username" ng-minlength="5" required>
            <label class="item item-input">
                <span class="input-label">Password</span>
                <input type="text" name="password" ng-model="password" ng-minlength="6" required>
            <label class="item item-input">
                <span class="input-label">Number</span>
                <input type="text" name="number" ng-model="mobile" ng-minlength="10" ng-maxlength="12" required ui-br-phone-number-mask>
            <label class="item item-input">
                <span class="input-label">Message</span>
                <textarea type="text" name="message" ng-model="message" ng-minlength="10" ng-maxlength="30" required></textarea>
        <div class="padding">
            <p ng-show="myForm.username.$error.required">* Username is required</p>
            <p ng-show="myForm.username.$invalid && !myForm.username.$pristine">* Username must be an email address</p>
            <p ng-show="myForm.username.$error.minlength">* Username must be longer than 5 characters</p>
            <p ng-show="myForm.password.$error.required">* Password is required</p>
            <p ng-show="myForm.number.$error.required">* Mobile Number is required</p>
            <p ng-show="myForm.message.$error.required">* Message is required</p>
            <p ng-show="myForm.password.$error.minlength">* Password must be longer than 6 characters</p>
            <p ng-show="myForm.number.$error.minlength">*Mobile Number must be minimum than 10 Numbers</p>
            <p ng-show="myForm.message.$error.minlength">* Message must be longer than 10 Numbers</p>
            <p ng-show="myForm.number.$error.maxlength">*Mobile Number must be longer than 12 Numbers</p>
            <p ng-show="myForm.message.$error.maxlength">* Message must be longer than 30 Numbers</p>
        <div class="padding">
            <button type="button" class="button button-block button-positive" ng-disabled="myForm.$invalid" ng-click="submit(username)">Submit</button>

CollapsingToolbar like android application code is done you add platform in your application code platform add command: 

ionic cordova platform add android/ios/windows

Build and Run command

ionic cordova build android/ios/windows
ionic cordova run android/ios/windows

Github link:

See demo :

thank you

About the author
Code solution


Add comment To Login
Add comment