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

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
Copyright 1kohei1 ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <link rel='stylesheet prefetch' href=''>

      <link rel="stylesheet" href="css/style.css">



  <div ng-controller="AppCtrl" layout="column" class="inputdemoErrors" ng-app="MyApp">

  <md-toolbar class="md-primary">
    <h1 class="md-toolbar-tools">
      Top Secret Project

  <!-- <md-content layout-padding=""> -->
    <form name="projectForm">
        <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>
        <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>
        <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>
  <!-- </md-content> -->
    <div layout-padding>
      <md-input-container flex>
        <input type="text" name="sample" ng-model="sample" required/>
        <div ng-messages="{'required': true}">
          <div ng-message="required">Please enter the External Link</div>
        {{ sampleForm.sample.$error }}

  <script src=''></script>
<script src=''></script>
<script src=''></script>
<script src=''></script>
<script src=''></script>
<script src=''></script>
<script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
.inputdemoErrors .inputErrorsApp {
  min-height: 48px; }

/*Downloaded from */

.controller('AppCtrl', function($scope) {
  $scope.project = {
    description: 'Nuclear Missile Defense System',
    rate: 500