AngularJS Example:

by Slava Fomin II

HTML

<div ng-app="application">
  <div ng-controller="ApplicationController">
      
      
      
      <form name="someform" novalidate>
          
        <p class="alert alert-attention">
            Only one constraint is violated at the same time for some reason.
        </p>
          
        <p class="alert alert-attention">
            For example when you click <strong>40</strong>
            you should have both <strong>Max</strong> and
            <strong>Pattern</strong> violations.
        </p>
          
        <div class="form-group">
            <label for="somevalue" class="control-label">Multiple Constraints:</label>
            <div class="control">
                <input
                    id="somevalue"
                    name="somevalue"
                    class="form-control"
                    type="number"
                    ng-model="values.somevalue"
                    max="30"
                    ng-pattern="/\./"
                >
                    <ul>
                        <li ng-show="someform.somevalue.$error.number">
                            <p class="alert alert-error">Must be a number</p>
                        </li>
                        <li ng-show="someform.somevalue.$error.max">
                            <p class="alert alert-error">Maximum is 30</p>
                        </li>
                        <li ng-show="someform.somevalue.$error.pattern">
                            <p class="alert alert-error">Must contain dot</p>
                        </li>
                    </ul>
            </div>
        </div>
          
      </form>
          
      <div class="buttons">
          <button ng-click="values.somevalue='FOO'">FOO</button>
          <button ng-click="values.somevalue=25">25</button>
          <button ng-click="values.somevalue=40">40</button>
          <button ng-click="values.somevalue=40.0">40.0</button>
          <button ng-click="values.somevalue=29.99">29.99</button>
      </div>
   ...

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<style>

form {
    margin: 50px;
}

pre, .buttons {
    margin: 0 50px;
}

.buttons {
    margin-bottom: 20px;
}

JavaScript

angular.module('application', [])
    .controller('ApplicationController', function($scope) {
        $scope.values = {
            somevalue: null
        };
    })
;