angular.js form
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .my-form{ transition: all linear 0.5s; background: transparent; } .my-form.ng-invalid{ background-color: red; } </style> </head> <body ng-app="app"> <form name="myForm" class="my-form"> userType: <input type="text" name="input" ng-model="userType" required="required"/><br /> <span class="error" ng-show="myForm.input.$error.required">Required!</span><br /> <code>userType:{{userType}}</code><br /> <code>$valid:{{myForm.input.$valid}}</code><br /> <code>$error:{{myForm.input.$error}}</code><br /> <code>myForm.$valid: {{myForm.$valid}}</code><br /> <code>myForm.$error.required:{{myForm.$error.required}}</code> </form> <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="'+window.location.pathname+'"/>')); </script> <script type="text/javascript"> var app = angular.module('app' , []); /*app.controller('formController' , ['$scope' , function($scope){ $scope.userType = 'gest'; }])*/ </script> </body> </html>