Skip to content

Instantly share code, notes, and snippets.

@Dillie-O

Dillie-O/Foundation-Validation-"Lights"-using-Angularjs.markdown

Created October 11, 2014 14:10
Show Gist options
  • Save Dillie-O/1e4b462c5f304b71d0de to your computer and use it in GitHub Desktop.
Save Dillie-O/1e4b462c5f304b71d0de to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Sean Patterson.
Raw
Foundation-Validation-"Lights"-using-Angularjs.markdown

Foundation Validation "Lights" using Angularjs

This demonstrates using the prefix and postfix formatting with form elements for a nice way to validate fields in AngularJS

A Pen by Sean Patterson on CodePen.

License.

Raw
index.html
<html lang="en">
<head>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.3/css/foundation.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.js"></script>
<script src="//cdn.jsdelivr.net/webjars/angular-foundation/0.3.0/mm-foundation-tpls.min.js"></script>
</head>
<body ng-app='app' class="ng-cloak">
<div class="row" ng-controller="AppCtrl">
<div class="small-12 columns text-center">
<h2>Create Account</h2>
</div>
</div>
<div class="row">
<div class="text-center">
<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<form name="createForm" ng-submit="addAccount()">
<div class="row collapse prefix-radius postfix-radius">
<div class="small-3 columns">
<a class="button prefix">First Name</a>
</div>
<div class="small-8 columns">
<input name="firstName" type="text" ng-model="firstName" placeholder="First Name" required />
</div>
<div class="small-1 columns">
<a class="button postfix">
<span class="error" ng-show="createForm.firstName.$error.required">
&nbsp;
</span>
<span class="valid" ng-hide="createForm.firstName.$error.required">
&nbsp;
</span>
</a>
</div>
</div>
<div class="row collapse prefix-radius postfix-radius">
<div class="small-3 columns">
<a class="button prefix">Last Name</a>
</div>
<div class="small-8 columns">
<input name="lastName" type="text" ng-model="lastName" placeholder="Last Name" required />
</div>
<div class="small-1 columns">
<a class="button postfix">
<span class="error" ng-show="createForm.lastName.$error.required">
&nbsp;
</span>
<span class="valid" ng-hide="createForm.lastName.$error.required">
&nbsp;
</span>
</a>
</div>
</div>
<div class="row collapse prefix-radius postfix-radius">
<div class="small-3 columns">
<a class="button prefix">Email</a>
</div>
<div class="small-8 columns">
<input name="email" type="email" ng-model="email" placeholder="E-Mail Address" required />
</div>
<div class="small-1 columns">
<a class="button postfix">
<span class="error" ng-show="createForm.email.$error.required || createForm.email.$invalid">
&nbsp;
</span>
<span class="valid" ng-hide="createForm.email.$error.required || createForm.email.$invalid">
&nbsp;
</span>
</a>
</div>
</div>
<div class="row collapse prefix-radius postfix-radius">
<div class="small-3 columns">
<a class="button prefix">Password</a>
</div>
<div class="small-8 columns">
<input name="pass" type="password" ng-model="pass" placeholder="Password" required />
</div>
<div class="small-1 columns">
<a class="button postfix">
<span class="error" ng-show="createForm.pass.$error.required">
&nbsp;
</span>
<span class="valid" ng-hide="createForm.pass.$error.required">
&nbsp;
</span>
</a>
</div>
</div>
<div class="row">
<div class="small-6 columns text-center">
<input type="submit" value="Create" class="button primary" ng-disabled="createForm.$invalid" />
</div>
<div class="small-6 columns text-center">
<a ng-click="cancelAccount()" class="button danger">Cancel</a>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Raw
script.js
app = angular.module('app', ['ngAnimate']);
app.controller('AppCtrl', ['$scope', function($scope) {
// Alert methods
$scope.alerts = [];
$scope.addAlert = function (messageType, messageText) {
$scope.alerts.push({ type: messageType, msg: messageText });
};
$scope.closeAlert = function (index) {
$scope.alerts.splice(index, 1);
};
addAccount = function(){
$scope.addAlert('success', 'Account Created.');
}
cancelAccount = function(){
$scope.addAlert('alert', 'Cancelled.');
}
}]);
Raw
style.css
.valid
{
display: block;
padding: 0.375rem 0.5625rem 0.5625rem;
margin-top: -1px;
margin-bottom: 1rem;
font-size: 0.75rem;
font-weight: normal;
font-style: italic;
background-color: #43ac6a;
border-color: #3a945b;
color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment