Last active
August 29, 2015 14:15
-
-
Save jabas06/9b64a964a6c9a79cae5b to your computer and use it in GitHub Desktop.
[angular validation after blur]// source http://jsbin.com/cutumo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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