AngularJS Form Validation

Shows how AngularJS and CSS can play together for form validation. AngularJS port of this jQuery Password strength verification: http://www.webdesignerdepot.com/2012/01/password-strength-verification-with-jquery/

by Danish Farman

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="form-example" ng-controller="MainCtrl">
    <form name="form" novalidate>Will be Set to Dirty:
        <br/>
        <input type="text" ng-model="user.name" name="uName" required placeholder="uName" />
        <br/>Will not be set to Dirty:
        <br/>
        <input type="text" ng-model="user.secondName" name="uSecondName" required placeholder="uSecondName" />
        <br/>
        <br/>form.uName.$dirty: {{form.uName.$dirty}}
        <br/>form.uSecondName.$dirty: {{form.uSecondName.$dirty}}</form>
</div>

JavaScript

var app = angular.module('form-example', []);

app.controller('MainCtrl', function ($scope, $timeout) {
    $scope.user = {};
    $scope.user.name = "danish";
    $scope.user.secondName = "farman";
    
    $timeout(function () {
        $scope.form.uName.$dirty = true;
    }, 0);
});