Skip to content

Instantly share code, notes, and snippets.

@mishbah
Forked from calendee/app.scss
Last active August 29, 2015 14:11
Embed
What would you like to do?
form i.icon.error {
color: $assertive;
}
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: 5px solid darken($assertive, 15%);
}
form .has-success {
border-left: 5px solid darken($energized, 15%);
}
form.ng-submitted input.ng-valid + i.icon.error {
display: none;
}
angular.module('app', [...] )
.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("*");
var processInputs = 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');
}
});
}
}
};
for(var i = 0; i < inputs.length; i++) {
processInputs(inputs[i]);
}
}
}
}])
;
<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="text" ng-model="user.email" required="required" name="email">
<i class="icon ion-alert-circled error"></i>
</label>
<label class="item item-input validated">
<span class="input-label">Password</span>
<input type="password" ng-model="user.password" name="password" required="required">
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment