Skip to content

Instantly share code, notes, and snippets.

@MedRedha

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

Created March 18, 2020 15:02
Show Gist options
  • Save MedRedha/fff4dd1eaa89f0b3735f67b681b985bd to your computer and use it in GitHub Desktop.
Save MedRedha/fff4dd1eaa89f0b3735f67b681b985bd to your computer and use it in GitHub Desktop.
Download ZIP
Easy Form Validation in AngularJS with ngMessages
Raw
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>
Raw
script.js
var app = angular.module('app', ['ngMessages']);
Raw
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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment