Angular UI Validate Test

testing validation...

by johnwun

HTML

<script src="http://code.angularjs.org/1.1.0/angular.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://raw.github.com/joseym/angular-ui/master/common/module.js"></script>
<script src="https://raw.github.com/joseym/angular-ui/master/modules/directives/validate/validate.js"></script>
<div ng-controller="MainCtrl">
    <h4>{{ title }}</h4>
    <hr />
    <div class="alert alert-info alert-block">
        <h5>Enter something below.</h5>
        2 or more words that, together, have more than 5 characters will validate the field/form.
    </div>
    <hr />
    <form action="" name="test">
        <input type="text" name="input" ng-model="input" ui-validate="{ large: 'isLarge($value)', two: 'fullName($value)', agree: agreed }" required />
        <label><input type="checkbox" ng-model="agreed" ng-clicked="toggle(agreed)" /> I Agree!</label>

        <ul>
            <li ng-class="{true: test.$valid, false: !test.$valid}"><strong>Valid Form</strong>: <span>{{ test.$valid }}</span></li>
            <li ng-class="{true: test.input.$valid, false: !test.input.$valid}"><strong>Valid Field</strong>: <span>{{ test.input.$valid }}</span></li>
            <li ng-class="{true: !test.input.$error.large, false: test.input.$error.large}"><strong>Valid Char Count (5+ letters, not counting spaces)</strong>: <span>{{ !test.input.$error.large }}</span></li>
            <li ng-class="{true: !test.input.$error.two, false: test.input.$error.two}"><strong>Valid Word Count (2+)</strong>: <span>{{ !test.input.$error.two }}</span></li>
            <li ng-class="{true: agreed, false: !agreed}"><strong>Valid Agreement</strong>: <span>{{ agreed }}</span></li>
        </ul>
        
    </form>
</div>

CSS

body { margin: 15px; }
input { float: left; }
input.ng-invalid { border: 1px solid red }
input[type="checkbox"]{ margin: 5px }
.false span { color: red }
.true span { color: green }
label { float: left; }
ul { display: block; float: left; width: 100% }

JavaScript

var app = angular.module('myApp', ['ui']);
app.controller('MainCtrl', function($scope) {
    $scope.title = 'Angular UI Validation';
    $.extend($scope, {

        agreed: false,
        
        input: $scope.input || 'Valid Field',

        isLarge: function(value){
            if(angular.isDefined(value)){
                var value = value.split(' ').join("");
                return value.length >= 5;
            }
        },

        fullName: function(value){
            if(angular.isDefined(value)){
                var names = value.split(' ');
                return names.length >= 2;
            }
        },

        toggle: function(model){
            return !$scope[model];
        }

    });

});