Skip to content

Instantly share code, notes, and snippets.

@jabas06
Last active August 29, 2015 14:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jabas06/9b64a964a6c9a79cae5b to your computer and use it in GitHub Desktop.
Save jabas06/9b64a964a6c9a79cae5b to your computer and use it in GitHub Desktop.
[angular validation after blur]// source http://jsbin.com/cutumo
<!doctype html>
<html ng-app="myApp">
<head>
<meta name="description" content="[angular validation after blur]">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<style id="jsbin-css">
body {
background-color: #fff;
border-top: 5px solid #3399cc;
}
html {
background: #fff;
}
.row {
border: 0px solid green;
}
input.ng-invalid.ng-dirty {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
</style>
</head>
<body>
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
<fieldset>
<legend>Form</legend>
<div class="row">
<div class="large-12 columns">
<label>Your name</label>
<input type="text"
placeholder="Name"
name="name"
ng-model="signup.name"
ng-minlength=3
ng-maxlength=20 ng-focus
required />
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid && !signup_form.name.$focused">
<small class="error"
ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Your email</label>
<input type="email"
placeholder="Email"
name="email"
ng-model="signup.email"
ng-minlength=3 ng-maxlength=20 ng-focus
required />
<div class="error"
ng-show="signup_form.email.$dirty && signup_form.email.$invalid && !signup_form.email.$focused">
<small class="error"
ng-show="signup_form.email.$error.required">
Your email is required.
</small>
<small class="error"
ng-show="signup_form.email.$error.minlength">
Your email is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.email.$error.email">
That is not a valid email. Please input a valid email.
</small>
<small class="error"
ng-show="signup_form.email.$error.maxlength">
Your email cannot be longer than 20 characters
</small>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Username</label>
<input type="text"
placeholder="Desired username"
name="username"
ng-model="signup.username"
ng-minlength=3
ng-maxlength=20 ng-focus
ensure-unique="username" required />
<div class="error"
ng-show="signup_form.username.$dirty && signup_form.username.$invalid && !signup_form.username.$focused">
<small class="error"
ng-show="signup_form.username.$error.required">
Please input a username
</small>
<small class="error"
ng-show="signup_form.username.$error.minlength">
Your username is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.username.$error.maxlength">
Your username cannot be longer than 20 characters
</small>
<small class="error"
ng-show="signup_form.username.$error.unique">
That username is taken, please try another
</small>
</div>
</div>
</div>
<button type="submit" class="button radius">Submit</button>
</fieldset>
</form>
<script id="jsbin-javascript">
angular.module('myApp', [])
.directive('ngFocus', [function() {
var FOCUS_CLASS = "ng-focused";
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$focused = false;
element.bind('focus', function(evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = true;});
}).bind('blur', function(evt) {
element.removeClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = false;});
});
}
};
}])
.controller('signupController', ['$scope', function($scope) {
$scope.submitted = false;
$scope.signupForm = function() {
if ($scope.signup_form.$valid) {
// Submit as normal
} else {
$scope.signup_form.submitted = true;
}
};
}]);
</script>
<script id="jsbin-source-css" type="text/css">body {
background-color: #fff;
border-top: 5px solid #3399cc;
}
html {
background: #fff;
}
.row {
border: 0px solid green;
}
input.ng-invalid.ng-dirty {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">angular.module('myApp', [])
.directive('ngFocus', [function() {
var FOCUS_CLASS = "ng-focused";
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$focused = false;
element.bind('focus', function(evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = true;});
}).bind('blur', function(evt) {
element.removeClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = false;});
});
}
};
}])
.controller('signupController', ['$scope', function($scope) {
$scope.submitted = false;
$scope.signupForm = function() {
if ($scope.signup_form.$valid) {
// Submit as normal
} else {
$scope.signup_form.submitted = true;
}
};
}]);</script></body>
</html>
body {
background-color: #fff;
border-top: 5px solid #3399cc;
}
html {
background: #fff;
}
.row {
border: 0px solid green;
}
input.ng-invalid.ng-dirty {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
angular.module('myApp', [])
.directive('ngFocus', [function() {
var FOCUS_CLASS = "ng-focused";
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$focused = false;
element.bind('focus', function(evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = true;});
}).bind('blur', function(evt) {
element.removeClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = false;});
});
}
};
}])
.controller('signupController', ['$scope', function($scope) {
$scope.submitted = false;
$scope.signupForm = function() {
if ($scope.signup_form.$valid) {
// Submit as normal
} else {
$scope.signup_form.submitted = true;
}
};
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment