Angular+JQ+Bootstrap
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<div ng-controller="MyCtrl">
<form name="emailForm" ng-submit="submitEmail()">
<input ng-change="badEmail = false" ng-model="user.email" name="uEmail" />
<input type="submit">
<br />
<span ng-show="badEmail">Duplicated email</span>
</form>
</div>
JavaScript
angular.module('myApp', []);
function MyCtrl($scope) {
$scope.submitEmail = function() {
//Simulate server & response with a timeout
setTimeout(function() {
//$apply() tells angular that the $scope is 'dirty',
//so it checks things again and refreshes itself
$scope.$apply(function() {
$scope.badEmail = true;
});
}, 500);
};
}