Errors

In this example below you will see how to do a Errors with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 1kohei1, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1kohei1 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!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
  };
});

Comments