<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.2.14" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="formCtrl.js"></script>
<style>
body{margin:100px;}
</style>
</head>
<body ng-app="form">
<form id="registration" enctype="multipart/form-data" class="form-horizontal" ng-controller="formCtrl">
<fieldset id="step-1" ng-show="index===0" class="panel panel-default">
<div class="panel-heading">
<h3>Step 1 - Enter Access Key</h3>
</div>
<div class="panel-body">
<div class="form-group">
<div class="col-sm-2">
<span class="red">*</span>
<label>Key</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" data-val="true" data-val-required="The Access Key field is required." id="SecretKey" name="SecretKey" ng-required="" required="true" value="" />
<span class="field-validation-valid" data-valmsg-for="SecretKey" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</fieldset>
<fieldset id="step-2" ng-show="index===1" class="panel panel-default step">
<div class="panel-heading">
<h3>Step 2 - Enter Contact Information</h3>
</div>
<div class="panel-body">
<div class="form-group">
<div class="col-sm-2">
<span class="red">*</span>
<label>First Name</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<span class="red">*</span>
<label>Last Name</label>
</div>
<div class="col-sm-10">
<input type="text" class="form-control" />
</div>
</div>
</div>
</fieldset>
<fieldset id="step-3" ng-show="index===2" class="panel panel-default step">
<div class="panel-heading">
<h3>Step 3 - Upload Vehicle Registration</h3>
</div>
<div class="panel-body">
<div ng-repeat="vehicle in vehicles">
<div class="form-group">
<div class="col-sm-3">
<span class="red">*</span>
<label>Vehicle Make</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="vehicle.make" />
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<span class="red">*</span>
<label class="control-label">Vehicle Model</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="vehicle.model" />
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<span class="red">*</span>
<label class="control-label">Vehicle Year</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="vehicle.year" />
</div>
</div>
<div class="form-group">
<div class="col-sm-3">
<span class="red">*</span>
<label class="control-label">License Plate</label>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" ng-model="vehicle.tag" />
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<span class="red">*</span>
<label class="control-label">Upload Vehicle Registration</label>
</div>
<div class=" col-sm-9">
<input type="file" class="form-control" ng-model="vehicle.file" />
<span id="error{{$index}}" class="field-validation-error hidden">Invalid file type. File must be a valid image format.</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="button" class="btn btn-default remove-vehicle" ng-click="removeVehicle($index)">Remove {{vehicle.make}}</button>
</div>
</div>
<hr />
</div>
<label class="control-label">Add up to 4 vehicles</label>
<div class="row">
<div class=col-sm-6><button type="button" class="btn btn-default btn-sm btn-block add-vehicle" ng-click="addVehicle()" ng-show="vehicles.length <= vehicleMax">Add Vehicle</button></div>
<div class=col-sm-6><input type="submit" id="submit" class="btn btn-default btn-sm btn-block" name="index" value="Submit" /></div>
</div>
</div>
</fieldset>
<ul class="pager">
<li>
<a ng-show="index > 0" ng-click="getStep(-1)">Previous</a>
</li>
<li>
<a ng-show="index < steps.length - 1" ng-click="getStep(1)">Next</a>
</li>
</ul>
</form>
</body>
</html>
// Code goes here
form.controller("formCtrl", function ($scope, loader) {
$scope.vehicleMax = 4;
$scope.steps = ['Step 1', 'Step 2', 'Step 3'];
$scope.index = 0;
$scope.getStep = function (count) {
$scope.index += count;
};
$scope.vehicles = [new Vehicle("", "", "", "")];
$scope.addVehicle = function () {
$scope.vehicles.push(new Vehicle());
}
$scope.removeVehicle = function (index) {
$scope.vehicles.splice(index, 1);
}
function Vehicle(make, model, year, tag, file) {
var self = this;
self.make = make;
self.model = model;
self.year = year;
self.tag = tag;
self.file = file;
}
$('form').submit(function (evt) {
var hasValidFile = true;
var files = $('input[type="file"]');
var validExtensions = ["jpg", "png", "gif", "bmp", "pdf", "tiff"];
for (var i in files) {
if (files[i].value !== null) {
var fileExt = files[i].value.substring(files[i].value.lastIndexOf('.') + 1).toLowerCase();
if (!Contains(validExtensions, fileExt)) {
evt.preventDefault(); //prevent form post
$('#error' + i).removeClass('hidden');
hasValidFile = false;
}
else {
$('#error' + i).addClass('hidden');
}
}
}
if (hasValidFile) {
loader.init('Please wait...uploading')
loader.show();
}
});
function Contains(a, obj) {
for (var i = 0; i < a.length; i++) {
if (a[i] === obj) {
return true;
}
}
return false;
}
});
/* Styles go here */
var form = angular.module("form", []);
form.factory('loader', function () {
var message = "";
var widget = "";
var setMsg = function (msg) {
message = msg;
widget = $('<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title" id="myModalLabel">' + message + '</h4></div><div class="modal-body"><div class="progress progress-striped active"><div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div></div></div></div></div></div>');
};
var loader = {
show: function () {
widget.modal({ backdrop: 'static', keboard: false });
},
hide: function () {
widget.modal('hide');
},
init: function (msg) {
setMsg(msg);
}
};
return loader;
})