<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>

  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/0.9.23/css/ionic.css">

  <script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>


  <script src="script.js"></script>
</head>

<body >
      <form novalidate="novalidate" on-valid-submit="doLogin()">
    <div class="list card">
      <div class="item item-divider">Enter your info:</div>
      <label class="item item-input validated">
        <span class="input-label">eMail</span>
        <input type="email" ng-model="user.email" required="required" name="email">
        <i class="icon ion-alert-circled error col col-10"></i>
      </label>
      <label class="item item-input item-stacked-label validated row">
          <span class="input-label">Message<br/> Text</span>
          <textarea placeholder="Enter page text"
                    name="pageTextInput"
                    ng-model="data.pageTextInput"
                    required
                    maxlength="240">
          </textarea>
          <i class="icon ion-alert-circled error"></i>
        </label>
    </div>
    <div class="padding">
      <button type="submit" class="button icon-right ion-chevron-right button-block button-energized">
        login
      </button>
    </div>
    </form>
</body>


</html>
angular.module('myApp', ['ionic'])
.directive('onValidSubmit', ['$parse', '$timeout', function($parse, $timeout) {
    return {
      require: '^form',
      restrict: 'A',
      link: function(scope, element, attrs, form) {
        form.$submitted = false;
        var fn = $parse(attrs.onValidSubmit);
        element.on('submit', function(event) {
          scope.$apply(function() {
            element.addClass('ng-submitted');
            form.$submitted = true;
            if (form.$valid) {
              if (typeof fn === 'function') {
                fn(scope, {$event: event});
              }
            }
          });
        });
      }
    }
 
  }])
  .directive('validated', ['$parse', function($parse) {
    return {
      restrict: 'AEC',
      require: '^form',
      link: function(scope, element, attrs, form) {
        var inputs = element.find("*");
        for(var i = 0; i < inputs.length; i++) {
          (function(input){
            var attributes = input.attributes;
            if (attributes.getNamedItem('ng-model') != void 0 && attributes.getNamedItem('name') != void 0) {
              var field = form[attributes.name.value];
              if (field != void 0) {
                scope.$watch(function() {
                  return form.$submitted + "_" + field.$valid;
                }, function() {
                  if (form.$submitted != true) return;
                  var inp = angular.element(input);
                  if (inp.hasClass('ng-invalid')) {
                    element.removeClass('has-success');
                    element.addClass('has-error');
                  } else {
                    element.removeClass('has-error').addClass('has-success');
                  }
                });
              }
            }
          })(inputs[i]);
        }
      }
    }
  }])
;
form i.icon.error {
  color: #ef4e3a; }

form input + i.icon.error {
  display: none;
  margin-left: 8px; }

form.ng-submitted input.ng-invalid + i.icon.error {
  display: block; }

form .has-error {
  border-left: 3px solid #cc2511; 
  border-right: 3px solid #cc2511; 
}

form .has-success {
  border-left: 3px solid #3d8b3d; 
  border-right: 3px solid #3d8b3d; 
}

form.ng-submitted input.ng-valid + i.icon.error {
  display: none; }

.validated {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0px;
  width: 100%; }

.validated .input-label {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 30%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 30%;
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%; 
}

.validated input {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 60%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 60%;
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
  max-width: 60%; 
}

.validated error {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 10%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 10%;
  -ms-flex: 0 0 10%;
  flex: 0 0 10%;
  max-width: 10%; 
}
<view title="navTitle" hide-back-button="true" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true">
    <content has-header="true" padding="true">

    <h1>Home Page</h1>

    </content>
</view>
<view title="navTitle" hide-back-button="true" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true">
    <content has-header="true" padding="true">

    <h1>About Page</h1>

    </content>
</view>