Angular: Form and Validations

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<body ng-app
      ng-controller="LoginValidators"
      ng-class="{fullPageError: !myForm.$valid}">

    <form name="myForm"
          class="jumbotron">

        <!-- ALERT MSG -->
        <div class="alert alert-danger"
             ng-show="showAlert">
            {{alertMsg}}
            <button class="btn btn-warning"
                    ng-click="closeAlert()">x</button>
        </div>


        <!-- LOGIN PANEL -->
        <div ng-show="!showAlert">

            <input type="text"
                   name="user" ng-model="username"
                   required
                   placeholder="Username (required)"
                   ng-class="{error: myForm.user.$invalid}"/><BR>

            <input type="password"
                   name="pass"  ng-model="password"
                   required ng-minlength="5"
                   placeholder="Password (min 5 chars)"
                   ng-class="{error: myForm.pass.$invalid}" /><BR>

            <button class="btn btn-success" ng-click="send()"
                    ng-disabled="myForm.$invalid">Send</button>

        </div>

    </form>
            
            
    <h4>Form $valid: {{myForm.$valid}}</h4>
    <h4>Form user $error: {{myForm.user.$error}}</h4>
    <h4>Form user $invalid: {{myForm.user.$invalid}}</h4>
    <h4>Form pass $error: {{myForm.pass.$error}}</h4>


</div>

JavaScript

function LoginValidators($scope) {

    // hide Alert by default
    $scope.showAlert = false;

    $scope.send = function () {

        // Show Alert
        $scope.showAlert = true;

        // Custom Alert message
        $scope.alertMsg = $scope.username + " is now Logged";

    }

    $scope.closeAlert = function () {

        $scope.showAlert = false;

        $scope.username = "";
        $scope.password = "";
    }
}