Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.0rc10.js"></script>
<div ng-controller="MyCtrl">
<h3 class="showError" ng-show="foo.$invalid">Form is invalid</h3>
<p>Hello, {{name}}!</p>
<form name="foo" action="/">
<input ng-required="requireField" ng-model='name'>
<input type="checkbox" ng-model="requireField"/> Make form invalid
<br/>
<span>{{foo.$error}} {{foo.$invalid}}</span>
</form>
</div>
CSS
body {padding: 10px; }
h3.showError { font-size: 1.0em; font-weight: bold; margin: 5px; padding:4px;border:solid 1pt #faa; width:40%; }
JavaScript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name = '';
}