<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Errors</title>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div ng-controller="AppCtrl" layout="column" class="inputdemoErrors" ng-app="MyApp">
<md-toolbar class="md-primary">
<h1 class="md-toolbar-tools">
Top Secret Project
</h1>
</md-toolbar>
<!-- <md-content layout-padding=""> -->
<form name="projectForm">
<md-input-container>
<label>Description</label>
<input md-maxlength="30" required="" name="description" ng-model="project.description">
<div ng-messages="projectForm.description.$error">
<div ng-message="required">This is required.</div>
<div ng-message="md-maxlength">The name has to be less than 30 characters long.</div>
</div>
</md-input-container>
<md-input-container>
<label>Client Name</label>
<input required="" name="clientName" ng-model="project.clientName">
<div ng-messages="projectForm.clientName.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Hourly Rate (USD)</label>
<input required="" type="number" step="any" name="rate" ng-model="project.rate" min="800" max="4999">
<div ng-messages="projectForm.rate.$error">
<div ng-message="required">You've got to charge something! You can't just <b>give away</b> a Missile Defense System.</div>
<div ng-message="min">You should charge at least $800 an hour. This job is a big deal... if you mess up, everyone dies!</div>
<div ng-message="max">$5,000 an hour? That's a little ridiculous. I doubt event Bill Clinton could afford that.</div>
</div>
</md-input-container>
</form>
<!-- </md-content> -->
<div layout-padding>
<md-input-container flex>
<label>Sample</label>
<input type="text" name="sample" ng-model="sample" required/>
<div ng-messages="{'required': true}">
<div ng-message="required">Please enter the External Link</div>
</div>
{{ sampleForm.sample.$error }}
</md-input-container>
</div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
<script src='https://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/1kohei1/errors-bdMMpg */
.inputdemoErrors .inputErrorsApp {
min-height: 48px; }
/*Downloaded from https://www.codeseek.co/1kohei1/errors-bdMMpg */
angular.module('MyApp')
.controller('AppCtrl', function($scope) {
$scope.project = {
description: 'Nuclear Missile Defense System',
rate: 500
};
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
AngularJS
v1.3.15
Material Design Lite
