AngularJS Example

HTML

<div ng-app="HelloHabr">
    <form name="LovelyForm">
        <input type="text" name="LovelyMimimi" placeholder="mimimi" ng-model="mimimi" mimimi/>
        <br>
        <span ng-show="LovelyForm.LovelyMimimi.$error.mimimi">Mimimi, please</span>
        <span>{{mimimi}}</span>
    </form>
    <style>
        form.ng-valid {
            background-color:yellow;
        }
        form.ng-invalid {
            background-color:pink;
        }
        input.ng-valid {
            background-color: green;
        }
        input.ng-invalid {
            background-color: red;
        }
    </style>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <style>

JavaScript

var app = angular.module('HelloHabr', []);
app.directive('mimimi', function () {
    return {
        require: 'ngModel',
         link: function(scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function(mimimi) {
                if (/mimimi/.test(mimimi)) {
                    alert('mimimi');
                    ctrl.$setValidity('mimimi', true);
                    return mimimi.toUpperCase();
                } else {
                    ctrl.$setValidity('mimimi', false);
                    return undefined;
                }
            });
        }
    };
});