Skip to content

Instantly share code, notes, and snippets.

/Simple-Form-With-Validation.markdown

Created July 14, 2014 21:21
Show Gist options
  • Save anonymous/1824efdface87753f18a to your computer and use it in GitHub Desktop.
Save anonymous/1824efdface87753f18a to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Stirling Waite.
Raw
index.html
<html lang="en" ng-app="web-app">
<head>
<meta charset="UTF-8">
<title>Simple Form / List</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body ng-controller="FormCtrl">
<!-- Start Page Header -->
<div class="page-header">
<h1>Simple Form / List</h1>
<p class="lead">
Start with clicking <button class="btn btn-xs btn-primary" disabled><span class= "glyphicon glyphicon-plus"></span> Add Person</button>
to add a person to the list
</p>
</div>
<!-- End Page Header -->
<!-- Start Row -->
<div class="row">
<!-- Start Side Div -->
<aside class="col-xs-3">
<div class='input-group'>
<input class="form-control" type="text" ng-model="search.$">
<span class="input-group-btn">
<button class="btn btn-success" type="button" disabled>
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div><br>
<a class="btn btn-block btn-primary" data-target="#basicModal" data-toggle="modal" href="#"><span class="glyphicon glyphicon-plus"></span> Add Person</a>
</aside>
<!-- End Side Div -->
<!-- Start Person Table -->
<div class="container col-xs-9">
<table class="table table-striped col-xs-12" id="searchObjResults">
<tr>
<th>Date Submitted</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
<tr ng-repeat="item in list | filter:search:strict">
<td>{{item.sub_date | date:'MM-dd-yyyy'}}</td>
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td class="col-xs-2">
<button class="btn btn-danger btn-sm" type="button" ng-click="removePerson($index)"><span class="glyphicon glyphicon-remove"></span> Delete</button>
</td>
</tr>
<tr><td colspan="4" ng-show='list.length == 0'>No people listed...</td></tr>
<tr><td colspan="4" ng-show='list == undefined'>Loading...</td></tr>
</table>
</div>
<!-- End Person Table -->
</div>
<!-- End Row -->
<!-- Start Modal Window -->
<div class="modal fade modal-dialog modal-content" id="basicModal" tabindex="-1">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">&times;</button>
<h4 class="modal-title" id="myModalLabel">Add Person</h4>
</div>
<!-- Start Form -->
<div ng-form class="form-horizontal" id="css" role="form" name="personForm">
<div class="modal-body">
<!-- Start Name -->
<div class="form-group" ng-class="{ 'has-error' : errors.form_error == true && personForm.name.$invalid == true }">
<label class="col-sm-2 control-label" for="name">Name</label>
<div class="col-sm-10">
<input class="form-control" id="name" name="name" ng-model="form.name" placeholder="Name" type="text" required >
<span class="help-block error" ng-show="errors.form_error == true && personForm.name.$invalid == true">Please input a valid name</span>
</div>
</div>
<!-- End Name -->
<!-- Start Email -->
<div class="form-group" ng-class="{ 'has-error' : (errors.form_error == true && personForm.email.$invalid == true) || (errors.form_error == true && errors.email == true) }">
<label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-10">
<input class="form-control" id="email" name="email" ng-model="form.email" ng-pattern="email_regexp" placeholder="Email" type="email" required>
<span class="help-block error" ng-show="errors.form_error == true && personForm.email.$invalid && errors.email != true">Please input a valid email address (username@email.com)</span>
<span class="help-block error" ng-show="errors.form_error == true && errors.email == true">The email address you provided is already in the system. Please input a different email or contact your system admin.</span>
</div>
</div>
<!-- End Email -->
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-success" type="button" ng-click="submitForm(form)">Submit</button>
</div>
</div>
<!-- End Form -->
</div>
<!-- End Modal Window -->
</body>
</html>
Raw
script.js
angular.module('web-app', [ ]);
// create angular controller
function FormCtrl($scope, $filter) {
//Regex for the email ng-pattern
$scope.email_regexp = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
//Beginning list of people
$scope.list = [
{'sub_date':'1405123557521', 'name': 'Stirling Waite', 'email':'stirlingw@gmail.com'}
];
// Function to submit the form after all validation has occurred
$scope.submitForm = function (form) {
var errors = $scope.errors = {};
// Checks to make sure the form is completely valid
var errors = Verify($scope);
//If no errors it pushed the object onto the list array, clears the form, and closes the modal
//If errors exist it displays errors to user
if (ObjectLength(errors) === 0) {
form.sub_date = Date.now();
$scope.list.push(form);
$scope.form = $scope.errors = errors = {};
$('#basicModal').modal('toggle');
}else{
$scope.errors = errors;
}
}
//Removes the person from the list
$scope.removePerson = function (index) {
$scope.list.splice(index,1);
}
}
//Function for validation of the form
function Verify($scope) {
var errors = {};
var exists = emailExists($scope);
//Checks to see if any values in form
if($scope.form === undefined)
errors.form_error = true;
//Checks to see if any invalids exist in the form
if($scope.personForm.$invalid)
errors.form_error = true;
//Checks to see if email already exists in the list
if(exists){
errors.form_error = true;
errors.email = true;
}
return errors;
}
//Function to allow me to see if the person's email in the form already exists
function emailExists($scope) {
if($scope.form !== undefined){
var email = $scope.form.email;
return $scope.list.some(function(el) {
return el.email === email;
});
}
}
//Function to let me know how many properties exist in the error object
function ObjectLength(object) {
var length = 0;
for (var key in object) {
if (object.hasOwnProperty(key)) {
++length;
}
}
return length;
}
Raw
style.css
/* Importing Twitter Bootstrap */
@import "//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/flatly/bootstrap.min.css";
/* Displays better */
body {
padding:10px 40px 40px 40px;
background-color:#eee
}
/* Invalid input text */
.error {
color:red
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment