<body ng-app="app">
  <form name="formValidation">

    <input type="text" name="username" ng-model="inputName" ng-minlength="6" ng-maxlength="12" ng-pattern="/^\w+$/" required>
    <div ng-messages="formValidation.username.$error">
      <p ng-message="minlength">Username should have at least 6 characters.</p>
      <p ng-message="maxlength">Username should have at most 12 characters.</p>
      <p ng-message="required">Providing a username is mandatory.</p>
      <p ng-message="pattern">Username can only be alphanumeric with an optional underscore.</p>
    <input type="text" name="userPassword" ng-model="inputPassword" ng-minlength="6" ng-maxlength="12" required>
    <div ng-messages="formValidation.userPassword.$error">
      <p ng-message="minlength">Password should have at least 6 characters.</p>
      <p ng-message="maxlength">Password should have at most 12 characters.</p>
      <p ng-message="required">Providing a password is mandatory.</p>
    <input type="email" name="userEmail" ng-model="inputEmail" required>
    <div ng-messages="formValidation.userEmail.$error">
      <p ng-message="email">Please enter a valid email address.</p>
      <p ng-message="required">Providing an email is mandatory.</p>
body {
  font-family: 'Lato';
  margin: 20px;
  font-weight: 400;

label {
  color: #555;
  font-weight: bold;
  margin-right: 10px;
  display: block;

input {
  border: 2px solid #2196F3;
  width: 300px;
  outline: none;
  padding: 4px;
  border-radius: 5px;
  margin: 5px 0 10px 0;

p {
  color: red;
  font-weight: bold;
  padding: 0;
  margin: 5px 0 40px 0;
angular.module('app', ['ngMessages']);

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300,400

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.6.4/angular-messages.min.js