JSFiddle - React, Tailwind, and code Playground

by Sergei

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<body ng-app="MyApp">
  <div ng-controller="User">
    <form name="form" ng-submit="submit()" class="form-horizontal" novalidate novalidate>
      <label>Firstname</label>
      <input name="firstname" type="text" ng-model="user.firstname" required/>
      <p ng-show="form.firstname.$invalid && form.firstname.$dirty">Firstname is required</p>
      <label>Lastname</label>
      <input type="text" ng-model="user.lastname" required/>
      <label>Age</label>
      <input type="text" ng-model="user.age"/>
      <br>
      <button ng-disabled="form.$invalid" class="btn">Submit</button>
    </form>

    User Model: {{user}}
    <br>
    Form was submitted: {{wasSubmitted}}
    <br>
    Firstname input valid: {{form.firstname.$valid}}
    <br>
    Firstname validation error: {{form.firstname.$error}}
    <br>
    Form valid: {{form.$valid}}
    <br>
    Form validation error: {{form.$error}}
  </div>
</body>

CSS

input.ng-invalid.ng-dirty {
  background-color: red;
}
input.ng-valid.ng-dirty {
  background-color: wheat;
}
button

JavaScript

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

app.controller("User", function($scope) {
  $scope.user = {};
  $scope.wasSubmitted = false;

  $scope.submit = function() {
    $scope.wasSubmitted = true;
  };
});