current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I am trying to use ionic framework with angular .I want to do validation of my form on button click.Mean I need to validate all field on button click .All field are required ..I need to show error message if field not fulfil the requirement .Like password minimum character 5 and maximum 10 .And email validation .

could you please tell m how I will do validation.Here is my code http://jsfiddle.net/ktz4o031/

<html ng-app="">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Sign-in, Then Tabs Example</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>

  <body>

    <ion-view title="Page">
    <ion-content padding="true" class="has-header has-footer">
        <form>
            <label class="item item-input">
                <span class="input-label">name</span>
                <input type="text" placeholder="name">
            </label>
            <label class="item item-input">
                <span class="input-label">email</span>
                <input type="email" placeholder="email">
            </label>
            <label class="item item-input">
                <span class="input-label">password</span>
                <input type="password" placeholder="password">
            </label>
        </form>
        <button class="button button-balanced button-block">check validation</button>
    </ion-content>
</ion-view>

  </body>
</html>
share|improve this question
    
any feedback on my answer? –  LeftyX May 20 at 8:34

1 Answer 1

up vote 1 down vote

I might be late but here's what you can do.

First of all you need to define a form (as you did) using the ng-submit directive so that your form can be POST to the controller.

<body ng-app="myApp">
   <ion-view title="Page">
    <ion-content padding="true" class="has-header has-footer">
        <form name="loginForm" ng-submit="$scope.login($scope.user);" novalidate>
            <label class="item item-input">
                <span class="input-label">name</span>
                <input type="text" placeholder="name" ng-model="$scope.user.username" form-validate-after>
            </label>
            <label class="item item-input">
                <span class="input-label">email</span>
                <input type="email" placeholder="email" ng-model="$scope.user.email" form-validate-after>
            </label>
            <label class="item item-input">
                <span class="input-label">password</span>
                <input type="password" placeholder="password" ng-model="$scope.user.password" form-validate-after>
            </label>
        </form>
        <button class="button button-balanced button-block">check validation</button>
    </ion-content>
</ion-view>
</body>

I am passing a model to my input field so I can read them later. I've marked each input with a custom directive form-validate-after.

This is the directive I've created:

(function () {

    'use strict';

    angular
        .module('myApp', ['ionic'])
        .directive('formValidateAfter', formValidateAfter);

    function formValidateAfter() {
        var directive = {
            restrict: 'A',
            require: 'ngModel',
            link: link
        };

        return directive;

        function link(scope, element, attrs, ctrl) {
            var validateClass = 'form-validate';
            ctrl.validate = false;
            element.bind('focus', function (evt) {
                if (ctrl.validate && ctrl.$invalid) // if we focus and the field was invalid, keep the validation
                {
                    element.addClass(validateClass);
                    scope.$apply(function () { ctrl.validate = true; });
                }
                else {
                    element.removeClass(validateClass);
                    scope.$apply(function () { ctrl.validate = false; });
                }

            }).bind('blur', function (evt) {
                element.addClass(validateClass);
                scope.$apply(function () { ctrl.validate = true; });
            });
        }
    }

}());

this code will loop through all your input fields adding a class if it is marked as non-valid.

You need to define a css:

input.form-validate.ng-invalid {
    border: 3px solid #cc2511;
}
input.form-validate.ng-valid {
    border: none;
}

If you want to see this sample in action you can check it here.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.