MedRedha/easy-form-validation-in-angularjs-with-ngmessages.markdown

## easy-form-validation-in-angularjs-with-ngmessages.markdown

      
    Raw
  

              easy-form-validation-in-angularjs-with-ngmessages.markdown
            
          
    Easy Form Validation in AngularJS with ngMessages

Pen for article: http://www.sitepoint.com/easy-form-validation-angularjs-ngmessages
A Pen by SitePoint on CodePen.
License.

  
## index.html
<body ng-app="app">
  <form name="exampleForm" class="elegant-aero">
    <label>First Name:</label>
    <input type="text" name="userFirstName" ng-model="firstName" required />
    <div ng-messages="exampleForm.userFirstName.$error">
      <div ng-message="required">This field is required</div>
    </div>

    <label>Last Name:</label>
    <input type="text" name="userLastName" ng-model="lastName" required />
    <div ng-messages="exampleForm.userLastName.$error">
      <div ng-message="required">This field is required</div>
    </div>

    <label>Email Address:</label>
    <input type="email" name="userEmail" ng-model="email" required />
    <div ng-messages="exampleForm.userEmail.$error">
      <div ng-message="required">This field is required</div>
      <div ng-message="email">Your email address is invalid</div>
    </div>

    <label>Phone Number:</label>
    <input type="email" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
    <div ng-messages="exampleForm.userPhoneNumber.$error">
      <div ng-message="required">This field is required</div>
      <div ng-message="pattern">Must be a valid 10 digit phone number</div>
    </div>

    <label>User Message:</label>
    <textarea type="text" name="userMessage" class="form-control" rows="4" ng-model="message" ng-minlength="10" ng-maxlength="100" required></textarea>
    <div ng-messages="exampleForm.userMessage.$error">
      <div ng-message="required">This field is required</div>
      <div ng-message="minlength">Message must be over 10 characters</div>
      <div ng-message="maxlength">Message must not exceed 100 characters</div>
    </div>
  </form>
</body>

## script.js
var app = angular.module('app', ['ngMessages']);

## scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>

## style.css
/*
  Credit: http://www.sanwebe.com/2013/10/css-html-form-styles
*/

.elegant-aero {
  margin-left:auto;
  margin-right:auto;
  margin-top: 25px;
  max-width: 600px;
  background: #D2E9FF;
  padding: 20px 20px 20px 20px;
  font: 12px Arial, Helvetica, sans-serif;
  color: #666;
}

.elegant-aero label {
  display: block;
  margin: 0px 0px 5px;
}

.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea {
  color: #888;
  width: 60%;
  padding: 0px 0px 0px 5px;
  border: 1px solid #C5E2FF;
  background: #FBFBFB;
  outline: 0;
  -webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
  box-shadow: inset 0px 1px 6px #ECF3F5;
  font: 200 12px/25px Arial, Helvetica, sans-serif;
  height: 30px;
  line-height:15px;
  margin: 2px 6px 16px 0px;
}

.elegant-aero textarea{
  height:100px;
  padding: 5px 0px 0px 5px;
  width: 60%;
}

div{
  display:inline-block;
  vertical-align:top;
  color: red;
  margin-top: 5px;
}
	<body ng-app="app">
	<form name="exampleForm" class="elegant-aero">
	<label>First Name:</label>
	<input type="text" name="userFirstName" ng-model="firstName" required />
	<div ng-messages="exampleForm.userFirstName.$error">
	<div ng-message="required">This field is required</div>
	</div>

	<label>Last Name:</label>
	<input type="text" name="userLastName" ng-model="lastName" required />
	<div ng-messages="exampleForm.userLastName.$error">
	<div ng-message="required">This field is required</div>
	</div>

	<label>Email Address:</label>
	<input type="email" name="userEmail" ng-model="email" required />
	<div ng-messages="exampleForm.userEmail.$error">
	<div ng-message="required">This field is required</div>
	<div ng-message="email">Your email address is invalid</div>
	</div>

	<label>Phone Number:</label>
	<input type="email" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
	<div ng-messages="exampleForm.userPhoneNumber.$error">
	<div ng-message="required">This field is required</div>
	<div ng-message="pattern">Must be a valid 10 digit phone number</div>
	</div>

	<label>User Message:</label>
	<textarea type="text" name="userMessage" class="form-control" rows="4" ng-model="message" ng-minlength="10" ng-maxlength="100" required></textarea>
	<div ng-messages="exampleForm.userMessage.$error">
	<div ng-message="required">This field is required</div>
	<div ng-message="minlength">Message must be over 10 characters</div>
	<div ng-message="maxlength">Message must not exceed 100 characters</div>
	</div>
	</form>
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>
	/*
	Credit: http://www.sanwebe.com/2013/10/css-html-form-styles
	*/

	.elegant-aero {
	margin-left:auto;
	margin-right:auto;
	margin-top: 25px;
	max-width: 600px;
	background: #D2E9FF;
	padding: 20px 20px 20px 20px;
	font: 12px Arial, Helvetica, sans-serif;
	color: #666;
	}

	.elegant-aero label {
	display: block;
	margin: 0px 0px 5px;
	}

	.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea {
	color: #888;
	width: 60%;
	padding: 0px 0px 0px 5px;
	border: 1px solid #C5E2FF;
	background: #FBFBFB;
	outline: 0;
	-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
	box-shadow: inset 0px 1px 6px #ECF3F5;
	font: 200 12px/25px Arial, Helvetica, sans-serif;
	height: 30px;
	line-height:15px;
	margin: 2px 6px 16px 0px;
	}

	.elegant-aero textarea{
	height:100px;
	padding: 5px 0px 0px 5px;
	width: 60%;
	}

	div{
	display:inline-block;
	vertical-align:top;
	color: red;
	margin-top: 5px;
	}