<!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>