JSFiddle - React, Tailwind, and code Playground

by webvitaly

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<section ng-app="app">
    <article ng-controller="appCtrl" class="well">
        <form class="form-horizontal" name="appForm" novalidate>
            <div class="form-group">
                <label class="col-sm-2 control-label">Number (min -  5; max - 20;)
                    <span class="label label-danger" ng-show="appForm.number.$invalid && appForm.number.$dirty">hover to show errors</span>
                </label>
                <div class="col-sm-10">
                    <input type="number" min="5" max="20" ng-model="number" name="number" class="form-control" required />
                </div>
            </div>
            <div class="alert alert-danger" ng-show="appForm.number.$invalid && appForm.number.$dirty">
                <ul>
                    <li ng-show="appForm.number.$error.required">this field is required</li>
                    <li ng-show="appForm.number.$error.number">should be number</li>
                    <li ng-show="appForm.number.$error.min">minimum - 5</li>
                    <li ng-show="appForm.number.$error.max">miximum - 20</li>
                </ul>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button ng-click="submit()" ng-disabled="appForm.$invalid" class="btn btn-primary">submit</button>
                </div>
            </div>
        </form>
    </article>
</section>

CSS

input.ng-invalid.ng-dirty {
    border-color: red;
    color: red;
}
input.ng-valid.ng-dirty {
    border-color: green;
    color: green;
}

JavaScript

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

app.controller('appCtrl', function ($scope) {

});