Skip to content

Instantly share code, notes, and snippets.

@patrykattc

patrykattc/AngularJS Form Validation.markdown

Last active July 8, 2016 16:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save patrykattc/1778e75a9112e3ccc3eb4b9f1a8f86a1 to your computer and use it in GitHub Desktop.
Save patrykattc/1778e75a9112e3ccc3eb4b9f1a8f86a1 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS Material Design Form Validation
Raw
AngularJS Material Design Form Validation.markdown
Raw
index.html
<div ng-controller="mainController" layout-padding layout="column" ng-cloak="" ng-app="validationApp">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">User Form</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<form name="userForm" novalidate>
<div layout="column">
<md-input-container>
<label>Name</label>
<input type="text" name="name" ng-model="user.name" required>
<div ng-messages="userForm.name.$error">
<div ng-message="required">
You name is required.
</div>
</div>
</md-input-container>
<md-input-container>
<label>Username</label>
<input type="text" name="username" ng-model="user.username" minlength="3" maxlength="8">
<div ng-messages="userForm.username.$error">
<div ng-message="minlength">Username is too short.</div>
<div ng-message="maxlength">Username is too long.</div>
</div>
</md-input-container>
<md-input-container>
<label>Email</label>
<input type="email" name="email" ng-model="user.email">
<div ng-messages="userForm.email.$error">
<div ng-message="userForm.email.$invalid">
Enter a valid email.
</div>
</div>
</md-input-container>
</div>
</form>
<md-card-content>
<md-card-actions layout="row" layout-align="end center">
<md-button ng-click="submitForm()" class="md-raised md-primary">Submit</md-button>
</md-card-actions>
</md-card>
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Form</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<table class="table table-bordered">
<tbody>
<tr>
<td>ERROR: {{userForm.$error}}</td>
</tr>
<tr>
<td ng-class="{ success: userForm.$valid, danger: userForm.$invalid }">Valid</td>
</tr>
<tr>
<td ng-class="{ success: userForm.$pristine, danger: !userForm.$pristine }">Pristine</td>
</tr>
<tr>
<td ng-class="{ success: userForm.$dirty }">Dirty</td>
</tr>
</tbody>
</table>
</md-card-content>
</md-card>
<div layout="row" layout-padding>
<md-card flex>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Name</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<table>
<tbody>
<tr>
<td ng-class="{ success: userForm.name.$valid, danger: userForm.name.$invalid }">Valid</td>
</tr>
<tr>
<td ng-class="{ success: userForm.name.$pristine, danger: !userForm.name.$pristine }">Pristine</td>
</tr>
<tr>
<td ng-class="{ success: userForm.name.$dirty }">Dirty</td>
</tr>
<tr>
<td ng-class="{ success: userForm.name.$touched }">Touched</td>
</tr>
</tbody>
</table>
</md-card-content>
</md-card>
<md-card flex>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Username</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<table>
<tbody>
<tr>
<td ng-class="{ success: userForm.username.$valid, danger: userForm.username.$invalid }">Valid</td>
</tr>
<tr>
<td ng-class="{ success: userForm.username.$pristine, danger: !userForm.username.$pristine }">Pristine</td>
</tr>
<tr>
<td ng-class="{ success: userForm.username.$dirty }">Dirty</td>
</tr>
<tr>
<td ng-class="{ success: userForm.username.$touched }">Touched</td>
</tr>
</tbody>
</table>
</md-card-content>
</md-card>
<md-card flex>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Email</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<table>
<tbody>
<tr>
<td ng-class="{ success: userForm.email.$valid, danger: userForm.email.$invalid }">Valid</td>
</tr>
<tr>
<td ng-class="{ success: userForm.email.$pristine, danger: !userForm.email.$pristine }">Pristine</td>
</tr>
<tr>
<td ng-class="{ success: userForm.email.$dirty }">Dirty</td>
</tr>
<tr>
<td ng-class="{ success: userForm.email.$touched }">Touched</td>
</tr>
</tbody>
</table>
</md-card-content>
</md-card>
</div>
</div>
Raw
script.js
// create angular app
var validationApp = angular.module('validationApp', ['ngMaterial','ngMessages']);
// create angular controller
validationApp.controller('mainController', function($scope) {
$scope.submitted = false;
// function to submit the form after all validation has occurred
$scope.submitForm = function() {
$scope.submitted = true;
// check to make sure the form is completely valid
if ($scope.userForm.$valid) {
alert('our form is amazing');
}
else {
alert('ERROR');
}
};
});
Raw
scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
Raw
style.css
.success {
background-color : lightgreen
}
.danger {
background-color : orange
}
Raw
styles
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment