From 8f1928c933da5789e52c8aceb858d9c3c5ec9700 Mon Sep 17 00:00:00 2001
From: James Cole <thegrumpydictator@gmail.com>
Date: Fri, 24 May 2019 05:29:04 +0200
Subject: [PATCH] Error reporting in new form.

---
 public/v1/js/app.js                           | 2433 ++++++++++++-----
 resources/assets/js/app.js                    |    4 +-
 .../components/transactions/AccountSelect.vue |    9 +-
 .../js/components/transactions/Amount.vue     |   13 +-
 .../js/components/transactions/Budget.vue     |   15 +-
 .../js/components/transactions/Category.vue   |    9 +-
 .../transactions/CreateTransaction.vue        |  234 +-
 .../transactions/CustomAttachments.vue        |   15 +-
 .../js/components/transactions/CustomDate.vue |   15 +-
 .../components/transactions/CustomString.vue  |   13 +-
 .../transactions/CustomTextarea.vue           |   17 +-
 .../transactions/CustomTransactionFields.vue  |   34 +-
 .../transactions/ForeignAmountSelect.vue      |   11 +-
 .../transactions/GroupDescription.vue         |   42 +
 .../js/components/transactions/PiggyBank.vue  |   12 +-
 .../components/transactions/StandardDate.vue  |   39 +
 .../js/components/transactions/Tags.vue       |   12 +-
 .../transactions/TransactionDescription.vue   |   38 +
 18 files changed, 2151 insertions(+), 814 deletions(-)
 create mode 100644 resources/assets/js/components/transactions/GroupDescription.vue
 create mode 100644 resources/assets/js/components/transactions/StandardDate.vue
 create mode 100644 resources/assets/js/components/transactions/TransactionDescription.vue

diff --git a/public/v1/js/app.js b/public/v1/js/app.js
index 6bc350981e..9e6b62d8a9 100644
--- a/public/v1/js/app.js
+++ b/public/v1/js/app.js
@@ -60,7 +60,7 @@
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 14);
+/******/ 	return __webpack_require__(__webpack_require__.s = 15);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -165,7 +165,7 @@ if (typeof DEBUG !== 'undefined' && DEBUG) {
   ) }
 }
 
-var listToStyles = __webpack_require__(45)
+var listToStyles = __webpack_require__(46)
 
 /*
 type StyleObject = {
@@ -490,7 +490,7 @@ module.exports = function normalizeComponent (
 
 
 var bind = __webpack_require__(7);
-var isBuffer = __webpack_require__(22);
+var isBuffer = __webpack_require__(23);
 
 /*global toString:true*/
 
@@ -827,7 +827,7 @@ module.exports = g;
 /* WEBPACK VAR INJECTION */(function(process) {
 
 var utils = __webpack_require__(3);
-var normalizeHeaderName = __webpack_require__(24);
+var normalizeHeaderName = __webpack_require__(25);
 
 var DEFAULT_CONTENT_TYPE = {
   'Content-Type': 'application/x-www-form-urlencoded'
@@ -923,7 +923,7 @@ module.exports = defaults;
 /* 6 */
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__(21);
+module.exports = __webpack_require__(22);
 
 /***/ }),
 /* 7 */
@@ -1141,12 +1141,12 @@ process.umask = function() { return 0; };
 
 
 var utils = __webpack_require__(3);
-var settle = __webpack_require__(25);
-var buildURL = __webpack_require__(27);
-var parseHeaders = __webpack_require__(28);
-var isURLSameOrigin = __webpack_require__(29);
+var settle = __webpack_require__(26);
+var buildURL = __webpack_require__(28);
+var parseHeaders = __webpack_require__(29);
+var isURLSameOrigin = __webpack_require__(30);
 var createError = __webpack_require__(10);
-var btoa = (typeof window !== 'undefined' && window.btoa && window.btoa.bind(window)) || __webpack_require__(30);
+var btoa = (typeof window !== 'undefined' && window.btoa && window.btoa.bind(window)) || __webpack_require__(31);
 
 module.exports = function xhrAdapter(config) {
   return new Promise(function dispatchXhrRequest(resolve, reject) {
@@ -1243,7 +1243,7 @@ module.exports = function xhrAdapter(config) {
     // This is only done if running in a standard browser environment.
     // Specifically not if we're in a web worker, or react-native.
     if (utils.isStandardBrowserEnv()) {
-      var cookies = __webpack_require__(31);
+      var cookies = __webpack_require__(32);
 
       // Add xsrf header
       var xsrfValue = (config.withCredentials || isURLSameOrigin(config.url)) && config.xsrfCookieName ?
@@ -1327,7 +1327,7 @@ module.exports = function xhrAdapter(config) {
 "use strict";
 
 
-var enhanceError = __webpack_require__(26);
+var enhanceError = __webpack_require__(27);
 
 /**
  * Create an Error with the specified message, config, error code, request and response.
@@ -12478,68 +12478,122 @@ Vue.compile = compileToFunctions;
 
 module.exports = Vue;
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4), __webpack_require__(39).setImmediate))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4), __webpack_require__(40).setImmediate))
 
 /***/ }),
 /* 14 */
 /***/ (function(module, exports, __webpack_require__) {
 
-module.exports = __webpack_require__(15);
+var disposed = false
+function injectStyle (ssrContext) {
+  if (disposed) return
+  __webpack_require__(74)
+}
+var normalizeComponent = __webpack_require__(2)
+/* script */
+var __vue_script__ = __webpack_require__(76)
+/* template */
+var __vue_template__ = __webpack_require__(77)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = injectStyle
+/* scopeId */
+var __vue_scopeId__ = "data-v-7425a390"
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "resources/assets/js/components/transactions/GroupDescription.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-7425a390", Component.options)
+  } else {
+    hotAPI.reload("data-v-7425a390", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
 
 
 /***/ }),
 /* 15 */
+/***/ (function(module, exports, __webpack_require__) {
+
+module.exports = __webpack_require__(16);
+
+
+/***/ }),
+/* 16 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_uiv__ = __webpack_require__(41);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_uiv__ = __webpack_require__(42);
 /**
  * First we will load all of this project's JavaScript dependencies which
  * includes Vue and other libraries. It is a great starting point when
  * building robust, powerful web applications using Vue and Laravel.
  */
 
-__webpack_require__(16);
+__webpack_require__(17);
 window.Vue = __webpack_require__(13);
 
 
 Vue.use(__WEBPACK_IMPORTED_MODULE_0_uiv__);
 // components for create and edit transactions.
-Vue.component('budget', __webpack_require__(42));
+Vue.component('budget', __webpack_require__(43));
 
-Vue.component('custom-date', __webpack_require__(48));
-Vue.component('custom-string', __webpack_require__(53));
-Vue.component('custom-attachments', __webpack_require__(58));
-Vue.component('custom-textarea', __webpack_require__(63));
+Vue.component('custom-date', __webpack_require__(49));
+Vue.component('custom-string', __webpack_require__(54));
+Vue.component('custom-attachments', __webpack_require__(59));
+Vue.component('custom-textarea', __webpack_require__(64));
+Vue.component('standard-date', __webpack_require__(69));
+Vue.component('group-description', __webpack_require__(14));
+Vue.component('transaction-description', __webpack_require__(78));
 
-Vue.component('custom-transaction-fields', __webpack_require__(68));
-Vue.component('piggy-bank', __webpack_require__(73));
-Vue.component('tags', __webpack_require__(78));
-Vue.component('category', __webpack_require__(84));
-Vue.component('amount', __webpack_require__(89));
-Vue.component('foreign-amount', __webpack_require__(94));
-Vue.component('transaction-type', __webpack_require__(99));
-Vue.component('account-select', __webpack_require__(104));
+Vue.component('custom-transaction-fields', __webpack_require__(83));
+Vue.component('piggy-bank', __webpack_require__(88));
+Vue.component('tags', __webpack_require__(93));
+Vue.component('category', __webpack_require__(99));
+Vue.component('amount', __webpack_require__(104));
+Vue.component('foreign-amount', __webpack_require__(109));
+Vue.component('transaction-type', __webpack_require__(114));
+Vue.component('account-select', __webpack_require__(119));
 
 /**
  * Components for OAuth2 tokens.
  */
-Vue.component('passport-clients', __webpack_require__(109));
-Vue.component('passport-authorized-clients', __webpack_require__(114));
-Vue.component('passport-personal-access-tokens', __webpack_require__(119));
-Vue.component('create-transaction', __webpack_require__(124));
+Vue.component('passport-clients', __webpack_require__(124));
+Vue.component('passport-authorized-clients', __webpack_require__(129));
+Vue.component('passport-personal-access-tokens', __webpack_require__(134));
+Vue.component('create-transaction', __webpack_require__(139));
 
 var app = new Vue({
   el: '#app'
 });
 
 /***/ }),
-/* 16 */
+/* 17 */
 /***/ (function(module, exports, __webpack_require__) {
 
 /* TODO REMOVE ME */
-window._ = __webpack_require__(17);
+window._ = __webpack_require__(18);
 
 /**
  * We'll load jQuery and the Bootstrap jQuery plugin which provides support
@@ -12548,9 +12602,9 @@ window._ = __webpack_require__(17);
  */
 
 try {
-  window.$ = window.jQuery = __webpack_require__(19);
+  window.$ = window.jQuery = __webpack_require__(20);
 
-  __webpack_require__(20);
+  __webpack_require__(21);
 } catch (e) {}
 
 /**
@@ -12578,7 +12632,7 @@ if (token) {
 }
 
 /***/ }),
-/* 17 */
+/* 18 */
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global, module) {var __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -29690,10 +29744,10 @@ if (token) {
   }
 }.call(this));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4), __webpack_require__(18)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4), __webpack_require__(19)(module)))
 
 /***/ }),
-/* 18 */
+/* 19 */
 /***/ (function(module, exports) {
 
 module.exports = function(module) {
@@ -29721,7 +29775,7 @@ module.exports = function(module) {
 
 
 /***/ }),
-/* 19 */
+/* 20 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -40092,7 +40146,7 @@ return jQuery;
 
 
 /***/ }),
-/* 20 */
+/* 21 */
 /***/ (function(module, exports) {
 
 /*!
@@ -42506,7 +42560,7 @@ if (typeof jQuery === 'undefined') {
 
 
 /***/ }),
-/* 21 */
+/* 22 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -42514,7 +42568,7 @@ if (typeof jQuery === 'undefined') {
 
 var utils = __webpack_require__(3);
 var bind = __webpack_require__(7);
-var Axios = __webpack_require__(23);
+var Axios = __webpack_require__(24);
 var defaults = __webpack_require__(5);
 
 /**
@@ -42549,14 +42603,14 @@ axios.create = function create(instanceConfig) {
 
 // Expose Cancel & CancelToken
 axios.Cancel = __webpack_require__(12);
-axios.CancelToken = __webpack_require__(37);
+axios.CancelToken = __webpack_require__(38);
 axios.isCancel = __webpack_require__(11);
 
 // Expose all/spread
 axios.all = function all(promises) {
   return Promise.all(promises);
 };
-axios.spread = __webpack_require__(38);
+axios.spread = __webpack_require__(39);
 
 module.exports = axios;
 
@@ -42565,7 +42619,7 @@ module.exports.default = axios;
 
 
 /***/ }),
-/* 22 */
+/* 23 */
 /***/ (function(module, exports) {
 
 /*!
@@ -42592,7 +42646,7 @@ function isSlowBuffer (obj) {
 
 
 /***/ }),
-/* 23 */
+/* 24 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -42600,8 +42654,8 @@ function isSlowBuffer (obj) {
 
 var defaults = __webpack_require__(5);
 var utils = __webpack_require__(3);
-var InterceptorManager = __webpack_require__(32);
-var dispatchRequest = __webpack_require__(33);
+var InterceptorManager = __webpack_require__(33);
+var dispatchRequest = __webpack_require__(34);
 
 /**
  * Create a new instance of Axios
@@ -42678,7 +42732,7 @@ module.exports = Axios;
 
 
 /***/ }),
-/* 24 */
+/* 25 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -42697,7 +42751,7 @@ module.exports = function normalizeHeaderName(headers, normalizedName) {
 
 
 /***/ }),
-/* 25 */
+/* 26 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -42730,7 +42784,7 @@ module.exports = function settle(resolve, reject, response) {
 
 
 /***/ }),
-/* 26 */
+/* 27 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -42758,7 +42812,7 @@ module.exports = function enhanceError(error, config, code, request, response) {
 
 
 /***/ }),
-/* 27 */
+/* 28 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -42833,7 +42887,7 @@ module.exports = function buildURL(url, params, paramsSerializer) {
 
 
 /***/ }),
-/* 28 */
+/* 29 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -42893,7 +42947,7 @@ module.exports = function parseHeaders(headers) {
 
 
 /***/ }),
-/* 29 */
+/* 30 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -42968,7 +43022,7 @@ module.exports = (
 
 
 /***/ }),
-/* 30 */
+/* 31 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -43011,7 +43065,7 @@ module.exports = btoa;
 
 
 /***/ }),
-/* 31 */
+/* 32 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -43071,7 +43125,7 @@ module.exports = (
 
 
 /***/ }),
-/* 32 */
+/* 33 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -43130,18 +43184,18 @@ module.exports = InterceptorManager;
 
 
 /***/ }),
-/* 33 */
+/* 34 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
 var utils = __webpack_require__(3);
-var transformData = __webpack_require__(34);
+var transformData = __webpack_require__(35);
 var isCancel = __webpack_require__(11);
 var defaults = __webpack_require__(5);
-var isAbsoluteURL = __webpack_require__(35);
-var combineURLs = __webpack_require__(36);
+var isAbsoluteURL = __webpack_require__(36);
+var combineURLs = __webpack_require__(37);
 
 /**
  * Throws a `Cancel` if cancellation has been requested.
@@ -43223,7 +43277,7 @@ module.exports = function dispatchRequest(config) {
 
 
 /***/ }),
-/* 34 */
+/* 35 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -43250,7 +43304,7 @@ module.exports = function transformData(data, headers, fns) {
 
 
 /***/ }),
-/* 35 */
+/* 36 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -43271,7 +43325,7 @@ module.exports = function isAbsoluteURL(url) {
 
 
 /***/ }),
-/* 36 */
+/* 37 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -43292,7 +43346,7 @@ module.exports = function combineURLs(baseURL, relativeURL) {
 
 
 /***/ }),
-/* 37 */
+/* 38 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -43356,7 +43410,7 @@ module.exports = CancelToken;
 
 
 /***/ }),
-/* 38 */
+/* 39 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -43390,7 +43444,7 @@ module.exports = function spread(callback) {
 
 
 /***/ }),
-/* 39 */
+/* 40 */
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global) {var scope = (typeof global !== "undefined" && global) ||
@@ -43446,7 +43500,7 @@ exports._unrefActive = exports.active = function(item) {
 };
 
 // setimmediate attaches itself to the global object
-__webpack_require__(40);
+__webpack_require__(41);
 // On some exotic environments, it's not clear which object `setimmediate` was
 // able to install onto.  Search each possibility in the same order as the
 // `setimmediate` library.
@@ -43460,7 +43514,7 @@ exports.clearImmediate = (typeof self !== "undefined" && self.clearImmediate) ||
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4)))
 
 /***/ }),
-/* 40 */
+/* 41 */
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global, process) {(function (global, undefined) {
@@ -43653,7 +43707,7 @@ exports.clearImmediate = (typeof self !== "undefined" && self.clearImmediate) ||
 /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(4), __webpack_require__(8)))
 
 /***/ }),
-/* 41 */
+/* 42 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -48473,19 +48527,19 @@ var install = function install(Vue$$1) {
 
 
 /***/ }),
-/* 42 */
+/* 43 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(43)
+  __webpack_require__(44)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(46)
+var __vue_script__ = __webpack_require__(47)
 /* template */
-var __vue_template__ = __webpack_require__(47)
+var __vue_template__ = __webpack_require__(48)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -48524,13 +48578,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 43 */
+/* 44 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(44);
+var content = __webpack_require__(45);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -48550,7 +48604,7 @@ if(false) {
 }
 
 /***/ }),
-/* 44 */
+/* 45 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -48558,13 +48612,13 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 45 */
+/* 46 */
 /***/ (function(module, exports) {
 
 /**
@@ -48597,7 +48651,7 @@ module.exports = function listToStyles (parentId, list) {
 
 
 /***/ }),
-/* 46 */
+/* 47 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -48632,10 +48686,16 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     name: "Budget",
-    props: ['transactionType', 'value'],
+    props: ['transactionType', 'value', 'error'],
     mounted: function mounted() {
         this.loadBudgets();
     },
@@ -48650,6 +48710,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             this.$emit('input', this.$refs.budget.value);
         },
 
+        hasError: function hasError() {
+            return this.error.length > 0;
+        },
         loadBudgets: function loadBudgets() {
             var _this = this;
 
@@ -48670,7 +48733,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 47 */
+/* 48 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -48679,32 +48742,49 @@ var render = function() {
   var _c = _vm._self._c || _h
   return typeof this.transactionType !== "undefined" &&
     this.transactionType === "Withdrawal"
-    ? _c("div", { staticClass: "form-group" }, [
-        _c("div", { staticClass: "col-sm-12" }, [
-          this.budgets.length > 0
-            ? _c(
-                "select",
-                {
-                  ref: "budget",
-                  staticClass: "form-control",
-                  attrs: { name: "budget[]" },
-                  on: { input: _vm.handleInput }
-                },
-                _vm._l(this.budgets, function(budget) {
-                  return _c(
-                    "option",
+    ? _c(
+        "div",
+        { staticClass: "form-group", class: { "has-error": _vm.hasError() } },
+        [
+          _c(
+            "div",
+            { staticClass: "col-sm-12" },
+            [
+              this.budgets.length > 0
+                ? _c(
+                    "select",
                     {
-                      attrs: { label: budget.name },
-                      domProps: { value: budget.id }
+                      ref: "budget",
+                      staticClass: "form-control",
+                      attrs: { name: "budget[]" },
+                      on: { input: _vm.handleInput }
                     },
-                    [_vm._v(_vm._s(budget.name))]
+                    _vm._l(this.budgets, function(budget) {
+                      return _c(
+                        "option",
+                        {
+                          attrs: { label: budget.name },
+                          domProps: { value: budget.id }
+                        },
+                        [_vm._v(_vm._s(budget.name))]
+                      )
+                    }),
+                    0
                   )
-                }),
-                0
-              )
-            : _vm._e()
-        ])
-      ])
+                : _vm._e(),
+              _vm._v(" "),
+              _vm._l(this.error, function(error) {
+                return _c("ul", { staticClass: "list-unstyled" }, [
+                  _c("li", { staticClass: "text-danger" }, [
+                    _vm._v(_vm._s(error))
+                  ])
+                ])
+              })
+            ],
+            2
+          )
+        ]
+      )
     : _vm._e()
 }
 var staticRenderFns = []
@@ -48718,19 +48798,19 @@ if (false) {
 }
 
 /***/ }),
-/* 48 */
+/* 49 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(49)
+  __webpack_require__(50)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(51)
+var __vue_script__ = __webpack_require__(52)
 /* template */
-var __vue_template__ = __webpack_require__(52)
+var __vue_template__ = __webpack_require__(53)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -48769,13 +48849,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 49 */
+/* 50 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(50);
+var content = __webpack_require__(51);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -48795,7 +48875,7 @@ if(false) {
 }
 
 /***/ }),
-/* 50 */
+/* 51 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -48803,13 +48883,13 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 51 */
+/* 52 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -48829,50 +48909,75 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     name: "CustomDate",
     props: {
         value: String,
         title: String,
-        name: String
+        name: String,
+        error: Array
     },
     methods: {
         handleInput: function handleInput(e) {
             this.$emit('input', this.$refs.date.value);
+        },
+
+        hasError: function hasError() {
+            return this.error.length > 0;
         }
     }
 });
 
 /***/ }),
-/* 52 */
+/* 53 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
-  return _c("div", { staticClass: "form-group" }, [
-    _c("div", { staticClass: "col-sm-12 text-sm" }, [
-      _vm._v("\n        " + _vm._s(_vm.title) + "\n    ")
-    ]),
-    _vm._v(" "),
-    _c("div", { staticClass: "col-sm-12" }, [
-      _c("input", {
-        ref: "date",
-        staticClass: "form-control",
-        attrs: {
-          type: "date",
-          name: _vm.name,
-          title: _vm.title,
-          autocomplete: "off",
-          placeholder: _vm.title
-        },
-        domProps: { value: _vm.value },
-        on: { input: _vm.handleInput }
-      })
-    ])
-  ])
+  return _c(
+    "div",
+    { staticClass: "form-group", class: { "has-error": _vm.hasError() } },
+    [
+      _c("div", { staticClass: "col-sm-12 text-sm" }, [
+        _vm._v("\n        " + _vm._s(_vm.title) + "\n    ")
+      ]),
+      _vm._v(" "),
+      _c(
+        "div",
+        { staticClass: "col-sm-12" },
+        [
+          _c("input", {
+            ref: "date",
+            staticClass: "form-control",
+            attrs: {
+              type: "date",
+              name: _vm.name,
+              title: _vm.title,
+              autocomplete: "off",
+              placeholder: _vm.title
+            },
+            domProps: { value: _vm.value },
+            on: { input: _vm.handleInput }
+          }),
+          _vm._v(" "),
+          _vm._l(this.error, function(error) {
+            return _c("ul", { staticClass: "list-unstyled" }, [
+              _c("li", { staticClass: "text-danger" }, [_vm._v(_vm._s(error))])
+            ])
+          })
+        ],
+        2
+      )
+    ]
+  )
 }
 var staticRenderFns = []
 render._withStripped = true
@@ -48885,19 +48990,19 @@ if (false) {
 }
 
 /***/ }),
-/* 53 */
+/* 54 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(54)
+  __webpack_require__(55)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(56)
+var __vue_script__ = __webpack_require__(57)
 /* template */
-var __vue_template__ = __webpack_require__(57)
+var __vue_template__ = __webpack_require__(58)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -48936,13 +49041,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 54 */
+/* 55 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(55);
+var content = __webpack_require__(56);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -48962,7 +49067,7 @@ if(false) {
 }
 
 /***/ }),
-/* 55 */
+/* 56 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -48970,13 +49075,13 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 56 */
+/* 57 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -48996,50 +49101,75 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     name: "CustomString",
     props: {
         title: String,
         name: String,
-        value: String
+        value: String,
+        error: Array
     },
     methods: {
         handleInput: function handleInput(e) {
             this.$emit('input', this.$refs.str.value);
+        },
+
+        hasError: function hasError() {
+            return this.error.length > 0;
         }
     }
 });
 
 /***/ }),
-/* 57 */
+/* 58 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
-  return _c("div", { staticClass: "form-group" }, [
-    _c("div", { staticClass: "col-sm-12 text-sm" }, [
-      _vm._v("\n        " + _vm._s(_vm.title) + "\n    ")
-    ]),
-    _vm._v(" "),
-    _c("div", { staticClass: "col-sm-12" }, [
-      _c("input", {
-        ref: "str",
-        staticClass: "form-control",
-        attrs: {
-          type: "text",
-          name: _vm.name,
-          title: _vm.title,
-          autocomplete: "off",
-          placeholder: _vm.title
-        },
-        domProps: { value: _vm.value },
-        on: { input: _vm.handleInput }
-      })
-    ])
-  ])
+  return _c(
+    "div",
+    { staticClass: "form-group", class: { "has-error": _vm.hasError() } },
+    [
+      _c("div", { staticClass: "col-sm-12 text-sm" }, [
+        _vm._v("\n        " + _vm._s(_vm.title) + "\n    ")
+      ]),
+      _vm._v(" "),
+      _c(
+        "div",
+        { staticClass: "col-sm-12" },
+        [
+          _c("input", {
+            ref: "str",
+            staticClass: "form-control",
+            attrs: {
+              type: "text",
+              name: _vm.name,
+              title: _vm.title,
+              autocomplete: "off",
+              placeholder: _vm.title
+            },
+            domProps: { value: _vm.value },
+            on: { input: _vm.handleInput }
+          }),
+          _vm._v(" "),
+          _vm._l(this.error, function(error) {
+            return _c("ul", { staticClass: "list-unstyled" }, [
+              _c("li", { staticClass: "text-danger" }, [_vm._v(_vm._s(error))])
+            ])
+          })
+        ],
+        2
+      )
+    ]
+  )
 }
 var staticRenderFns = []
 render._withStripped = true
@@ -49052,19 +49182,19 @@ if (false) {
 }
 
 /***/ }),
-/* 58 */
+/* 59 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(59)
+  __webpack_require__(60)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(61)
+var __vue_script__ = __webpack_require__(62)
 /* template */
-var __vue_template__ = __webpack_require__(62)
+var __vue_template__ = __webpack_require__(63)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -49103,13 +49233,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 59 */
+/* 60 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(60);
+var content = __webpack_require__(61);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -49129,7 +49259,7 @@ if(false) {
 }
 
 /***/ }),
-/* 60 */
+/* 61 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -49137,13 +49267,13 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 61 */
+/* 62 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -49163,42 +49293,68 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     name: "CustomAttachments",
     props: {
         title: String,
-        name: String
+        name: String,
+        error: Array
+    },
+    methods: {
+        hasError: function hasError() {
+            return this.error.length > 0;
+        }
     }
 });
 
 /***/ }),
-/* 62 */
+/* 63 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
-  return _c("div", { staticClass: "form-group" }, [
-    _c("div", { staticClass: "col-sm-12 text-sm" }, [
-      _vm._v("\n        " + _vm._s(_vm.title) + "\n    ")
-    ]),
-    _vm._v(" "),
-    _c("div", { staticClass: "col-sm-12" }, [
-      _c("input", {
-        staticClass: "form-control",
-        attrs: {
-          multiple: "multiple",
-          autocomplete: "off",
-          placeholder: _vm.title,
-          title: _vm.title,
-          name: _vm.name,
-          type: "file"
-        }
-      })
-    ])
-  ])
+  return _c(
+    "div",
+    { staticClass: "form-group", class: { "has-error": _vm.hasError() } },
+    [
+      _c("div", { staticClass: "col-sm-12 text-sm" }, [
+        _vm._v("\n        " + _vm._s(_vm.title) + "\n    ")
+      ]),
+      _vm._v(" "),
+      _c(
+        "div",
+        { staticClass: "col-sm-12" },
+        [
+          _c("input", {
+            staticClass: "form-control",
+            attrs: {
+              multiple: "multiple",
+              autocomplete: "off",
+              placeholder: _vm.title,
+              title: _vm.title,
+              name: _vm.name,
+              type: "file"
+            }
+          }),
+          _vm._v(" "),
+          _vm._l(this.error, function(error) {
+            return _c("ul", { staticClass: "list-unstyled" }, [
+              _c("li", { staticClass: "text-danger" }, [_vm._v(_vm._s(error))])
+            ])
+          })
+        ],
+        2
+      )
+    ]
+  )
 }
 var staticRenderFns = []
 render._withStripped = true
@@ -49211,19 +49367,19 @@ if (false) {
 }
 
 /***/ }),
-/* 63 */
+/* 64 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(64)
+  __webpack_require__(65)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(66)
+var __vue_script__ = __webpack_require__(67)
 /* template */
-var __vue_template__ = __webpack_require__(67)
+var __vue_template__ = __webpack_require__(68)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -49262,13 +49418,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 64 */
+/* 65 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(65);
+var content = __webpack_require__(66);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -49288,7 +49444,7 @@ if(false) {
 }
 
 /***/ }),
-/* 65 */
+/* 66 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -49296,13 +49452,13 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 66 */
+/* 67 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -49322,49 +49478,74 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     name: "CustomTextarea",
     props: {
         title: String,
         name: String,
-        value: String
+        value: String,
+        error: Array
     },
     methods: {
         handleInput: function handleInput(e) {
             this.$emit('input', this.$refs.str.value);
+        },
+
+        hasError: function hasError() {
+            return this.error.length > 0;
         }
     }
 });
 
 /***/ }),
-/* 67 */
+/* 68 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
-  return _c("div", { staticClass: "form-group" }, [
-    _c("div", { staticClass: "col-sm-12 text-sm" }, [
-      _vm._v("\n        " + _vm._s(_vm.title) + "\n    ")
-    ]),
-    _vm._v(" "),
-    _c("div", { staticClass: "col-sm-12" }, [
-      _c("textarea", {
-        ref: "str",
-        staticClass: "form-control",
-        attrs: {
-          name: _vm.name,
-          title: _vm.title,
-          autocomplete: "off",
-          placeholder: _vm.title
-        },
-        domProps: { value: _vm.value },
-        on: { input: _vm.handleInput }
-      })
-    ])
-  ])
+  return _c(
+    "div",
+    { staticClass: "form-group", class: { "has-error": _vm.hasError() } },
+    [
+      _c("div", { staticClass: "col-sm-12 text-sm" }, [
+        _vm._v("\n        " + _vm._s(_vm.title) + "\n    ")
+      ]),
+      _vm._v(" "),
+      _c(
+        "div",
+        { staticClass: "col-sm-12" },
+        [
+          _c("textarea", {
+            ref: "str",
+            staticClass: "form-control",
+            attrs: {
+              name: _vm.name,
+              title: _vm.title,
+              autocomplete: "off",
+              placeholder: _vm.title
+            },
+            domProps: { value: _vm.value },
+            on: { input: _vm.handleInput }
+          }),
+          _vm._v(" "),
+          _vm._l(this.error, function(error) {
+            return _c("ul", { staticClass: "list-unstyled" }, [
+              _c("li", { staticClass: "text-danger" }, [_vm._v(_vm._s(error))])
+            ])
+          })
+        ],
+        2
+      )
+    ]
+  )
 }
 var staticRenderFns = []
 render._withStripped = true
@@ -49377,19 +49558,528 @@ if (false) {
 }
 
 /***/ }),
-/* 68 */
+/* 69 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(69)
+  __webpack_require__(70)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(71)
+var __vue_script__ = __webpack_require__(72)
 /* template */
-var __vue_template__ = __webpack_require__(72)
+var __vue_template__ = __webpack_require__(73)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = injectStyle
+/* scopeId */
+var __vue_scopeId__ = "data-v-73fe3e1e"
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "resources/assets/js/components/transactions/StandardDate.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-73fe3e1e", Component.options)
+  } else {
+    hotAPI.reload("data-v-73fe3e1e", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 70 */
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(71);
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var update = __webpack_require__(1)("2833d7c2", content, false, {});
+// Hot Module Replacement
+if(false) {
+ // When the styles change, update the <style> tags
+ if(!content.locals) {
+   module.hot.accept("!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-73fe3e1e\",\"scoped\":true,\"hasInlineConfig\":true}!../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./StandardDate.vue", function() {
+     var newContent = require("!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-73fe3e1e\",\"scoped\":true,\"hasInlineConfig\":true}!../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./StandardDate.vue");
+     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+     update(newContent);
+   });
+ }
+ // When the module is disposed, remove the <style> tags
+ module.hot.dispose(function() { update(); });
+}
+
+/***/ }),
+/* 71 */
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(0)(false);
+// imports
+
+
+// module
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+
+// exports
+
+
+/***/ }),
+/* 72 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    props: ['error', 'value', 'index'],
+    name: "StandardDate",
+    methods: {
+        hasError: function hasError() {
+            return this.error.length > 0;
+        },
+        handleInput: function handleInput(e) {
+            this.$emit('input', this.$refs.date.value);
+        }
+    }
+});
+
+/***/ }),
+/* 73 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "div",
+    { staticClass: "form-group", class: { "has-error": _vm.hasError() } },
+    [
+      _c(
+        "div",
+        { staticClass: "col-sm-12" },
+        [
+          _c("input", {
+            ref: "date",
+            staticClass: "form-control",
+            attrs: {
+              type: "date",
+              name: "date[]",
+              title: "Date",
+              autocomplete: "off",
+              disabled: _vm.index > 0,
+              placeholder: "Date"
+            },
+            domProps: { value: _vm.value },
+            on: { input: _vm.handleInput }
+          }),
+          _vm._v(" "),
+          _vm._l(this.error, function(error) {
+            return _c("ul", { staticClass: "list-unstyled" }, [
+              _c("li", { staticClass: "text-danger" }, [_vm._v(_vm._s(error))])
+            ])
+          })
+        ],
+        2
+      )
+    ]
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-73fe3e1e", module.exports)
+  }
+}
+
+/***/ }),
+/* 74 */
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(75);
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var update = __webpack_require__(1)("35d3a69a", content, false, {});
+// Hot Module Replacement
+if(false) {
+ // When the styles change, update the <style> tags
+ if(!content.locals) {
+   module.hot.accept("!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-7425a390\",\"scoped\":true,\"hasInlineConfig\":true}!../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./GroupDescription.vue", function() {
+     var newContent = require("!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-7425a390\",\"scoped\":true,\"hasInlineConfig\":true}!../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./GroupDescription.vue");
+     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+     update(newContent);
+   });
+ }
+ // When the module is disposed, remove the <style> tags
+ module.hot.dispose(function() { update(); });
+}
+
+/***/ }),
+/* 75 */
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(0)(false);
+// imports
+
+
+// module
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+
+// exports
+
+
+/***/ }),
+/* 76 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    props: ['error', 'value', 'index'],
+    name: "GroupDescription",
+    methods: {
+        hasError: function hasError() {
+            return this.error.length > 0;
+        },
+        handleInput: function handleInput(e) {
+            this.$emit('input', this.$refs.descr.value);
+        }
+    }
+});
+
+/***/ }),
+/* 77 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "div",
+    { staticClass: "form-group", class: { "has-error": _vm.hasError() } },
+    [
+      _c(
+        "div",
+        { staticClass: "col-sm-12" },
+        [
+          _c("input", {
+            ref: "descr",
+            staticClass: "form-control",
+            attrs: {
+              type: "text",
+              name: "group_title",
+              title: "Description of the split transaction",
+              autocomplete: "off",
+              placeholder: "Description of the split transaction"
+            },
+            domProps: { value: _vm.value },
+            on: { input: _vm.handleInput }
+          }),
+          _vm._v(" "),
+          _vm.error.length === 0
+            ? _c("p", { staticClass: "help-block" }, [
+                _vm._v(
+                  "\n            If you create a split transaction, there must be a global description for all splits\n            of the transaction.\n        "
+                )
+              ])
+            : _vm._e(),
+          _vm._v(" "),
+          _vm._l(this.error, function(error) {
+            return _c("ul", { staticClass: "list-unstyled" }, [
+              _c("li", { staticClass: "text-danger" }, [_vm._v(_vm._s(error))])
+            ])
+          })
+        ],
+        2
+      )
+    ]
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-7425a390", module.exports)
+  }
+}
+
+/***/ }),
+/* 78 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+function injectStyle (ssrContext) {
+  if (disposed) return
+  __webpack_require__(79)
+}
+var normalizeComponent = __webpack_require__(2)
+/* script */
+var __vue_script__ = __webpack_require__(81)
+/* template */
+var __vue_template__ = __webpack_require__(82)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = injectStyle
+/* scopeId */
+var __vue_scopeId__ = "data-v-540cd511"
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "resources/assets/js/components/transactions/TransactionDescription.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-540cd511", Component.options)
+  } else {
+    hotAPI.reload("data-v-540cd511", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
+
+/***/ }),
+/* 79 */
+/***/ (function(module, exports, __webpack_require__) {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(80);
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var update = __webpack_require__(1)("02c667a0", content, false, {});
+// Hot Module Replacement
+if(false) {
+ // When the styles change, update the <style> tags
+ if(!content.locals) {
+   module.hot.accept("!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-540cd511\",\"scoped\":true,\"hasInlineConfig\":true}!../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./TransactionDescription.vue", function() {
+     var newContent = require("!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-540cd511\",\"scoped\":true,\"hasInlineConfig\":true}!../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./TransactionDescription.vue");
+     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+     update(newContent);
+   });
+ }
+ // When the module is disposed, remove the <style> tags
+ module.hot.dispose(function() { update(); });
+}
+
+/***/ }),
+/* 80 */
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(0)(false);
+// imports
+
+
+// module
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+
+// exports
+
+
+/***/ }),
+/* 81 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ __webpack_exports__["default"] = ({
+    props: ['error', 'value', 'index'],
+    name: "TransactionDescription",
+    methods: {
+        hasError: function hasError() {
+            return this.error.length > 0;
+        },
+        handleInput: function handleInput(e) {
+            this.$emit('input', this.$refs.descr.value);
+        }
+    }
+});
+
+/***/ }),
+/* 82 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c(
+    "div",
+    { staticClass: "form-group", class: { "has-error": _vm.hasError() } },
+    [
+      _c(
+        "div",
+        { staticClass: "col-sm-12" },
+        [
+          _c("input", {
+            ref: "descr",
+            staticClass: "form-control",
+            attrs: {
+              type: "text",
+              name: "description[]",
+              title: "Description",
+              autocomplete: "off",
+              placeholder: "Description"
+            },
+            domProps: { value: _vm.value },
+            on: { input: _vm.handleInput }
+          }),
+          _vm._v(" "),
+          _vm._l(this.error, function(error) {
+            return _c("ul", { staticClass: "list-unstyled" }, [
+              _c("li", { staticClass: "text-danger" }, [_vm._v(_vm._s(error))])
+            ])
+          })
+        ],
+        2
+      )
+    ]
+  )
+}
+var staticRenderFns = []
+render._withStripped = true
+module.exports = { render: render, staticRenderFns: staticRenderFns }
+if (false) {
+  module.hot.accept()
+  if (module.hot.data) {
+    require("vue-hot-reload-api")      .rerender("data-v-540cd511", module.exports)
+  }
+}
+
+/***/ }),
+/* 83 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var disposed = false
+function injectStyle (ssrContext) {
+  if (disposed) return
+  __webpack_require__(84)
+}
+var normalizeComponent = __webpack_require__(2)
+/* script */
+var __vue_script__ = __webpack_require__(86)
+/* template */
+var __vue_template__ = __webpack_require__(87)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -49428,13 +50118,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 69 */
+/* 84 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(70);
+var content = __webpack_require__(85);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -49454,7 +50144,7 @@ if(false) {
 }
 
 /***/ }),
-/* 70 */
+/* 85 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -49462,13 +50152,13 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 71 */
+/* 86 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -49512,10 +50202,26 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     name: "CustomTransactionFields",
-    props: ['value'],
+    props: ['value', 'error'],
     mounted: function mounted() {
         this.getPreference();
     },
@@ -49573,7 +50279,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 72 */
+/* 87 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -49586,7 +50292,11 @@ var render = function() {
       this.fields.interest_date
         ? _c(_vm.dateComponent, {
             tag: "component",
-            attrs: { name: "interest_date[]", title: "Interest date" },
+            attrs: {
+              error: _vm.error.interest_date,
+              name: "interest_date[]",
+              title: "Interest date"
+            },
             model: {
               value: _vm.value.interest_date,
               callback: function($$v) {
@@ -49600,7 +50310,11 @@ var render = function() {
       this.fields.book_date
         ? _c(_vm.dateComponent, {
             tag: "component",
-            attrs: { name: "book_date[]", title: "Book date" },
+            attrs: {
+              error: _vm.error.book_date,
+              name: "book_date[]",
+              title: "Book date"
+            },
             model: {
               value: _vm.value.book_date,
               callback: function($$v) {
@@ -49614,7 +50328,11 @@ var render = function() {
       this.fields.process_date
         ? _c(_vm.dateComponent, {
             tag: "component",
-            attrs: { name: "process_date[]", title: "Process date" },
+            attrs: {
+              error: _vm.error.process_date,
+              name: "process_date[]",
+              title: "Process date"
+            },
             model: {
               value: _vm.value.process_date,
               callback: function($$v) {
@@ -49628,7 +50346,11 @@ var render = function() {
       this.fields.due_date
         ? _c(_vm.dateComponent, {
             tag: "component",
-            attrs: { name: "due_date[]", title: "Due date" },
+            attrs: {
+              error: _vm.error.due_date,
+              name: "due_date[]",
+              title: "Due date"
+            },
             model: {
               value: _vm.value.due_date,
               callback: function($$v) {
@@ -49642,7 +50364,11 @@ var render = function() {
       this.fields.payment_date
         ? _c(_vm.dateComponent, {
             tag: "component",
-            attrs: { name: "payment_date[]", title: "Payment date" },
+            attrs: {
+              error: _vm.error.payment_date,
+              name: "payment_date[]",
+              title: "Payment date"
+            },
             model: {
               value: _vm.value.payment_date,
               callback: function($$v) {
@@ -49671,6 +50397,7 @@ var render = function() {
         ? _c(_vm.stringComponent, {
             tag: "component",
             attrs: {
+              error: _vm.error.internal_reference,
               name: "internal_reference[]",
               title: "Internal reference"
             },
@@ -49687,7 +50414,11 @@ var render = function() {
       this.fields.attachments
         ? _c(_vm.attachmentComponent, {
             tag: "component",
-            attrs: { name: "attachments[]", title: "Attachments" },
+            attrs: {
+              error: _vm.error.attachments,
+              name: "attachments[]",
+              title: "Attachments"
+            },
             model: {
               value: _vm.value.attachments,
               callback: function($$v) {
@@ -49701,7 +50432,7 @@ var render = function() {
       this.fields.notes
         ? _c(_vm.textareaComponent, {
             tag: "component",
-            attrs: { name: "notes[]", title: "Notes" },
+            attrs: { error: _vm.error.notes, name: "notes[]", title: "Notes" },
             model: {
               value: _vm.value.notes,
               callback: function($$v) {
@@ -49726,19 +50457,19 @@ if (false) {
 }
 
 /***/ }),
-/* 73 */
+/* 88 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(74)
+  __webpack_require__(89)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(76)
+var __vue_script__ = __webpack_require__(91)
 /* template */
-var __vue_template__ = __webpack_require__(77)
+var __vue_template__ = __webpack_require__(92)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -49777,13 +50508,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 74 */
+/* 89 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(75);
+var content = __webpack_require__(90);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -49803,7 +50534,7 @@ if(false) {
 }
 
 /***/ }),
-/* 75 */
+/* 90 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -49811,13 +50542,13 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 76 */
+/* 91 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -49852,10 +50583,15 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     name: "PiggyBank",
-    props: ['value', 'transactionType'],
+    props: ['value', 'transactionType', 'error'],
     mounted: function mounted() {
         this.loadPiggies();
     },
@@ -49870,6 +50606,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             this.$emit('input', this.$refs.piggy.value);
         },
 
+        hasError: function hasError() {
+            return this.error.length > 0;
+        },
         loadPiggies: function loadPiggies() {
             var _this = this;
 
@@ -49890,7 +50629,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 77 */
+/* 92 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -49899,32 +50638,49 @@ var render = function() {
   var _c = _vm._self._c || _h
   return typeof this.transactionType !== "undefined" &&
     this.transactionType === "Transfer"
-    ? _c("div", { staticClass: "form-group" }, [
-        _c("div", { staticClass: "col-sm-12" }, [
-          this.piggies.length > 0
-            ? _c(
-                "select",
-                {
-                  ref: "piggy",
-                  staticClass: "form-control",
-                  attrs: { name: "piggy_bank[]" },
-                  on: { input: _vm.handleInput }
-                },
-                _vm._l(this.piggies, function(piggy) {
-                  return _c(
-                    "option",
+    ? _c(
+        "div",
+        { staticClass: "form-group", class: { "has-error": _vm.hasError() } },
+        [
+          _c(
+            "div",
+            { staticClass: "col-sm-12" },
+            [
+              this.piggies.length > 0
+                ? _c(
+                    "select",
                     {
-                      attrs: { label: piggy.name },
-                      domProps: { value: piggy.id }
+                      ref: "piggy",
+                      staticClass: "form-control",
+                      attrs: { name: "piggy_bank[]" },
+                      on: { input: _vm.handleInput }
                     },
-                    [_vm._v(_vm._s(piggy.name))]
+                    _vm._l(this.piggies, function(piggy) {
+                      return _c(
+                        "option",
+                        {
+                          attrs: { label: piggy.name },
+                          domProps: { value: piggy.id }
+                        },
+                        [_vm._v(_vm._s(piggy.name))]
+                      )
+                    }),
+                    0
                   )
-                }),
-                0
-              )
-            : _vm._e()
-        ])
-      ])
+                : _vm._e(),
+              _vm._v(" "),
+              _vm._l(this.error, function(error) {
+                return _c("ul", { staticClass: "list-unstyled" }, [
+                  _c("li", { staticClass: "text-danger" }, [
+                    _vm._v(_vm._s(error))
+                  ])
+                ])
+              })
+            ],
+            2
+          )
+        ]
+      )
     : _vm._e()
 }
 var staticRenderFns = []
@@ -49938,19 +50694,19 @@ if (false) {
 }
 
 /***/ }),
-/* 78 */
+/* 93 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(79)
+  __webpack_require__(94)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(81)
+var __vue_script__ = __webpack_require__(96)
 /* template */
-var __vue_template__ = __webpack_require__(83)
+var __vue_template__ = __webpack_require__(98)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -49989,13 +50745,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 79 */
+/* 94 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(80);
+var content = __webpack_require__(95);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -50015,7 +50771,7 @@ if(false) {
 }
 
 /***/ }),
-/* 80 */
+/* 95 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -50023,20 +50779,20 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 81 */
+/* 96 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_axios__ = __webpack_require__(6);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_axios___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_axios__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__johmun_vue_tags_input__ = __webpack_require__(82);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__johmun_vue_tags_input__ = __webpack_require__(97);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__johmun_vue_tags_input___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__johmun_vue_tags_input__);
 //
 //
@@ -50074,6 +50830,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
+//
 
 
 
@@ -50083,7 +50844,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
     components: {
         VueTagsInput: __WEBPACK_IMPORTED_MODULE_1__johmun_vue_tags_input___default.a
     },
-    props: ['value'],
+    props: ['value', 'error'],
     data: function data() {
         return {
             tag: '',
@@ -50102,6 +50863,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             this.tags = newTags;
             this.$emit('input', this.tags);
         },
+
+        hasError: function hasError() {
+            return this.error.length > 0;
+        },
         initItems: function initItems() {
             var _this = this;
 
@@ -50125,46 +50890,56 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 82 */
+/* 97 */
 /***/ (function(module, exports, __webpack_require__) {
 
 !function(A,t){ true?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.vueTagsInput=t():A.vueTagsInput=t()}(window,function(){return function(A){var t={};function e(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return A[n].call(i.exports,i,i.exports,e),i.l=!0,i.exports}return e.m=A,e.c=t,e.d=function(A,t,n){e.o(A,t)||Object.defineProperty(A,t,{enumerable:!0,get:n})},e.r=function(A){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(A,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(A,"__esModule",{value:!0})},e.t=function(A,t){if(1&t&&(A=e(A)),8&t)return A;if(4&t&&"object"==typeof A&&A&&A.__esModule)return A;var n=Object.create(null);if(e.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:A}),2&t&&"string"!=typeof A)for(var i in A)e.d(n,i,function(t){return A[t]}.bind(null,i));return n},e.n=function(A){var t=A&&A.__esModule?function(){return A.default}:function(){return A};return e.d(t,"a",t),t},e.o=function(A,t){return Object.prototype.hasOwnProperty.call(A,t)},e.p="/dist/",e(e.s=6)}([function(A,t,e){var n=e(8);"string"==typeof n&&(n=[[A.i,n,""]]),n.locals&&(A.exports=n.locals);(0,e(4).default)("7ec05f6c",n,!1,{})},function(A,t,e){var n=e(10);"string"==typeof n&&(n=[[A.i,n,""]]),n.locals&&(A.exports=n.locals);(0,e(4).default)("3453d19d",n,!1,{})},function(A,t,e){"use strict";A.exports=function(A){var t=[];return t.toString=function(){return this.map(function(t){var e=function(A,t){var e=A[1]||"",n=A[3];if(!n)return e;if(t&&"function"==typeof btoa){var i=(o=n,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),a=n.sources.map(function(A){return"/*# sourceURL="+n.sourceRoot+A+" */"});return[e].concat(a).concat([i]).join("\n")}var o;return[e].join("\n")}(t,A);return t[2]?"@media "+t[2]+"{"+e+"}":e}).join("")},t.i=function(A,e){"string"==typeof A&&(A=[[null,A,""]]);for(var n={},i=0;i<this.length;i++){var a=this[i][0];null!=a&&(n[a]=!0)}for(i=0;i<A.length;i++){var o=A[i];null!=o[0]&&n[o[0]]||(e&&!o[2]?o[2]=e:e&&(o[2]="("+o[2]+") and ("+e+")"),t.push(o))}},t}},function(A,t){A.exports="data:application/vnd.ms-fontobject;base64,aAUAAMQEAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAUdPJHwAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFrAAAALwAAABgY21hcBdW0okAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmpZ+jMAAAAXgAAAD8aGVhZA/FmAgAAAJ0AAAANmhoZWEHgAPIAAACrAAAACRobXR4EgABvgAAAtAAAAAcbG9jYQCSAOIAAALsAAAAEG1heHAACQAfAAAC/AAAACBuYW1lmUoJ+wAAAxwAAAGGcG9zdAADAAAAAASkAAAAIAADA4ABkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkCA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpAv/9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAVgEBA74CgQAcAAABMhceARcWFwcmJy4BJyYjIgYHFyERFzY3PgE3NgIWSkNDbykpF2QQIB9VMzQ5P3AtnP6AmB0iIkspKAJVFxhSODlCIDMrKz4REislmgGAmhkVFBwICAABANYAgQMqAtUACwAAAQcXBycHJzcnNxc3Ayru7jzu7jzu7jzu7gKZ7u487u487u487u4AAQCSAIEDgAK9AAUAACUBFwEnNwGAAcQ8/gDuPPkBxDz+AO48AAAAAAEAAAAAAAAfydNRXw889QALBAAAAAAA1nUqGwAAAADWdSobAAAAAAO+AtUAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA74AAQAAAAAAAAAAAAAAAAAAAAcEAAAAAAAAAAAAAAACAAAABAAAVgQAANYEAACSAAAAAAAKABQAHgBQAGoAfgABAAAABwAdAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="},function(A,t,e){"use strict";function n(A,t){for(var e=[],n={},i=0;i<t.length;i++){var a=t[i],o=a[0],r={id:A+":"+i,css:a[1],media:a[2],sourceMap:a[3]};n[o]?n[o].parts.push(r):e.push(n[o]={id:o,parts:[r]})}return e}e.r(t),e.d(t,"default",function(){return g});var i="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!i)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var a={},o=i&&(document.head||document.getElementsByTagName("head")[0]),r=null,s=0,u=!1,c=function(){},d=null,l="data-vue-ssr-id",p="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function g(A,t,e,i){u=e,d=i||{};var o=n(A,t);return f(o),function(t){for(var e=[],i=0;i<o.length;i++){var r=o[i];(s=a[r.id]).refs--,e.push(s)}t?f(o=n(A,t)):o=[];for(i=0;i<e.length;i++){var s;if(0===(s=e[i]).refs){for(var u=0;u<s.parts.length;u++)s.parts[u]();delete a[s.id]}}}}function f(A){for(var t=0;t<A.length;t++){var e=A[t],n=a[e.id];if(n){n.refs++;for(var i=0;i<n.parts.length;i++)n.parts[i](e.parts[i]);for(;i<e.parts.length;i++)n.parts.push(v(e.parts[i]));n.parts.length>e.parts.length&&(n.parts.length=e.parts.length)}else{var o=[];for(i=0;i<e.parts.length;i++)o.push(v(e.parts[i]));a[e.id]={id:e.id,refs:1,parts:o}}}}function B(){var A=document.createElement("style");return A.type="text/css",o.appendChild(A),A}function v(A){var t,e,n=document.querySelector("style["+l+'~="'+A.id+'"]');if(n){if(u)return c;n.parentNode.removeChild(n)}if(p){var i=s++;n=r||(r=B()),t=C.bind(null,n,i,!1),e=C.bind(null,n,i,!0)}else n=B(),t=function(A,t){var e=t.css,n=t.media,i=t.sourceMap;n&&A.setAttribute("media",n);d.ssrId&&A.setAttribute(l,t.id);i&&(e+="\n/*# sourceURL="+i.sources[0]+" */",e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */");if(A.styleSheet)A.styleSheet.cssText=e;else{for(;A.firstChild;)A.removeChild(A.firstChild);A.appendChild(document.createTextNode(e))}}.bind(null,n),e=function(){n.parentNode.removeChild(n)};return t(A),function(n){if(n){if(n.css===A.css&&n.media===A.media&&n.sourceMap===A.sourceMap)return;t(A=n)}else e()}}var h,m=(h=[],function(A,t){return h[A]=t,h.filter(Boolean).join("\n")});function C(A,t,e,n){var i=e?"":n.css;if(A.styleSheet)A.styleSheet.cssText=m(t,i);else{var a=document.createTextNode(i),o=A.childNodes;o[t]&&A.removeChild(o[t]),o.length?A.insertBefore(a,o[t]):A.appendChild(a)}}},function(A,t,e){"use strict";var n=Array.isArray,i=Object.keys,a=Object.prototype.hasOwnProperty;A.exports=function A(t,e){if(t===e)return!0;if(t&&e&&"object"==typeof t&&"object"==typeof e){var o,r,s,u=n(t),c=n(e);if(u&&c){if((r=t.length)!=e.length)return!1;for(o=r;0!=o--;)if(!A(t[o],e[o]))return!1;return!0}if(u!=c)return!1;var d=t instanceof Date,l=e instanceof Date;if(d!=l)return!1;if(d&&l)return t.getTime()==e.getTime();var p=t instanceof RegExp,g=e instanceof RegExp;if(p!=g)return!1;if(p&&g)return t.toString()==e.toString();var f=i(t);if((r=f.length)!==i(e).length)return!1;for(o=r;0!=o--;)if(!a.call(e,f[o]))return!1;for(o=r;0!=o--;)if(!A(t[s=f[o]],e[s]))return!1;return!0}return t!=t&&e!=e}},function(A,t,e){A.exports=e(14)},function(A,t,e){"use strict";var n=e(0);e.n(n).a},function(A,t,e){(A.exports=e(2)(!0)).push([A.i,".ti-tag-input[data-v-108f4f13] {\n  background-color: transparent;\n  color: inherit;\n  border: none;\n  padding: 0px;\n  margin: 0px;\n  display: flex;\n  top: 0px;\n  position: absolute;\n  width: 100%;\n  line-height: inherit;\n}\n.ti-tag-input[data-v-108f4f13]::-ms-clear {\n  display: none;\n}\ninput[data-v-108f4f13]:focus {\n  outline: none;\n}\ninput[disabled][data-v-108f4f13] {\n  background-color: transparent;\n}\n","",{version:3,sources:["C:/Users/johan/dev/vue-tags-input/vue-tags-input/C:/Users/johan/dev/vue-tags-input/vue-tags-input/tag-input.vue"],names:[],mappings:"AAAA;EACE,8BAA8B;EAC9B,eAAe;EACf,aAAa;EACb,aAAa;EACb,YAAY;EACZ,cAAc;EACd,SAAS;EACT,mBAAmB;EACnB,YAAY;EACZ,qBAAqB;CAAE;AAEzB;EACE,cAAc;CAAE;AAElB;EACE,cAAc;CAAE;AAElB;EACE,8BAA8B;CAAE",file:"tag-input.vue?vue&type=style&index=0&id=108f4f13&lang=css&scoped=true&",sourcesContent:[".ti-tag-input {\n  background-color: transparent;\n  color: inherit;\n  border: none;\n  padding: 0px;\n  margin: 0px;\n  display: flex;\n  top: 0px;\n  position: absolute;\n  width: 100%;\n  line-height: inherit; }\n\n.ti-tag-input::-ms-clear {\n  display: none; }\n\ninput:focus {\n  outline: none; }\n\ninput[disabled] {\n  background-color: transparent; }\n"],sourceRoot:""}])},function(A,t,e){"use strict";var n=e(1);e.n(n).a},function(A,t,e){t=A.exports=e(2)(!0);var n=e(11),i=n(e(3)),a=n(e(3)+"#iefix"),o=n(e(12)),r=n(e(13));t.push([A.i,"@font-face {\n  font-family: 'icomoon';\n  src: url("+i+");\n  src: url("+a+') format("embedded-opentype"), url('+o+') format("truetype"), url('+r+') format("woff");\n  font-weight: normal;\n  font-style: normal;\n}\n[class^="ti-icon-"][data-v-61d92e31], [class*=" ti-icon-"][data-v-61d92e31] {\n  font-family: \'icomoon\' !important;\n  speak: none;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.ti-icon-check[data-v-61d92e31]:before {\n  content: "\\e902";\n}\n.ti-icon-close[data-v-61d92e31]:before {\n  content: "\\e901";\n}\n.ti-icon-undo[data-v-61d92e31]:before {\n  content: "\\e900";\n}\nul[data-v-61d92e31] {\n  margin: 0px;\n  padding: 0px;\n  list-style-type: none;\n}\n*[data-v-61d92e31], *[data-v-61d92e31]:before, *[data-v-61d92e31]:after {\n  box-sizing: border-box;\n}\ninput[data-v-61d92e31]:focus {\n  outline: none;\n}\ninput[disabled][data-v-61d92e31] {\n  background-color: transparent;\n}\n.vue-tags-input[data-v-61d92e31] {\n  max-width: 450px;\n  position: relative;\n  background-color: #fff;\n}\ndiv.vue-tags-input.disabled[data-v-61d92e31] {\n  opacity: 0.5;\n}\ndiv.vue-tags-input.disabled *[data-v-61d92e31] {\n    cursor: default;\n}\n.ti-input[data-v-61d92e31] {\n  border: 1px solid #ccc;\n  display: flex;\n  padding: 4px;\n  flex-wrap: wrap;\n}\n.ti-tags[data-v-61d92e31] {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  line-height: 1em;\n}\n.ti-tag[data-v-61d92e31] {\n  background-color: #5C6BC0;\n  color: #fff;\n  border-radius: 2px;\n  display: flex;\n  padding: 3px 5px;\n  margin: 2px;\n  font-size: .85em;\n}\n.ti-tag[data-v-61d92e31]:focus {\n    outline: none;\n}\n.ti-tag .ti-content[data-v-61d92e31] {\n    display: flex;\n    align-items: center;\n}\n.ti-tag .ti-tag-center[data-v-61d92e31] {\n    position: relative;\n}\n.ti-tag span[data-v-61d92e31] {\n    line-height: .85em;\n}\n.ti-tag span.ti-hidden[data-v-61d92e31] {\n    padding-left: 14px;\n    visibility: hidden;\n    height: 0px;\n    white-space: pre;\n}\n.ti-tag .ti-actions[data-v-61d92e31] {\n    margin-left: 2px;\n    display: flex;\n    align-items: center;\n    font-size: 1.15em;\n}\n.ti-tag .ti-actions i[data-v-61d92e31] {\n      cursor: pointer;\n}\n.ti-tag[data-v-61d92e31]:last-child {\n    margin-right: 4px;\n}\n.ti-tag.ti-invalid[data-v-61d92e31], .ti-tag.ti-tag.ti-deletion-mark[data-v-61d92e31] {\n    background-color: #e54d42;\n}\n.ti-new-tag-input-wrapper[data-v-61d92e31] {\n  display: flex;\n  flex: 1 0 auto;\n  padding: 3px 5px;\n  margin: 2px;\n  font-size: .85em;\n}\n.ti-new-tag-input-wrapper input[data-v-61d92e31] {\n    flex: 1 0 auto;\n    min-width: 100px;\n    border: none;\n    padding: 0px;\n    margin: 0px;\n}\n.ti-new-tag-input[data-v-61d92e31] {\n  line-height: initial;\n}\n.ti-autocomplete[data-v-61d92e31] {\n  border: 1px solid #ccc;\n  border-top: none;\n  position: absolute;\n  width: 100%;\n  background-color: #fff;\n  z-index: 20;\n}\n.ti-item > div[data-v-61d92e31] {\n  cursor: pointer;\n  padding: 3px 6px;\n  width: 100%;\n}\n.ti-selected-item[data-v-61d92e31] {\n  background-color: #5C6BC0;\n  color: #fff;\n}\n',"",{version:3,sources:["C:/Users/johan/dev/vue-tags-input/vue-tags-input/C:/Users/johan/dev/vue-tags-input/vue-tags-input/vue-tags-input.scss"],names:[],mappings:"AAAA;EACE,uBAAuB;EACvB,mCAA8C;EAC9C,+JAAuM;EACvM,oBAAoB;EACpB,mBAAmB;CAAE;AAEvB;EACE,kCAAkC;EAClC,YAAY;EACZ,mBAAmB;EACnB,oBAAoB;EACpB,qBAAqB;EACrB,qBAAqB;EACrB,eAAe;EACf,oCAAoC;EACpC,mCAAmC;CAAE;AAEvC;EACE,iBAAiB;CAAE;AAErB;EACE,iBAAiB;CAAE;AAErB;EACE,iBAAiB;CAAE;AAErB;EACE,YAAY;EACZ,aAAa;EACb,sBAAsB;CAAE;AAE1B;EACE,uBAAuB;CAAE;AAE3B;EACE,cAAc;CAAE;AAElB;EACE,8BAA8B;CAAE;AAElC;EACE,iBAAiB;EACjB,mBAAmB;EACnB,uBAAuB;CAAE;AAE3B;EACE,aAAa;CAAE;AACf;IACE,gBAAgB;CAAE;AAEtB;EACE,uBAAuB;EACvB,cAAc;EACd,aAAa;EACb,gBAAgB;CAAE;AAEpB;EACE,cAAc;EACd,gBAAgB;EAChB,YAAY;EACZ,iBAAiB;CAAE;AAErB;EACE,0BAA0B;EAC1B,YAAY;EACZ,mBAAmB;EACnB,cAAc;EACd,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;CAAE;AACnB;IACE,cAAc;CAAE;AAClB;IACE,cAAc;IACd,oBAAoB;CAAE;AACxB;IACE,mBAAmB;CAAE;AACvB;IACE,mBAAmB;CAAE;AACvB;IACE,mBAAmB;IACnB,mBAAmB;IACnB,YAAY;IACZ,iBAAiB;CAAE;AACrB;IACE,iBAAiB;IACjB,cAAc;IACd,oBAAoB;IACpB,kBAAkB;CAAE;AACpB;MACE,gBAAgB;CAAE;AACtB;IACE,kBAAkB;CAAE;AACtB;IACE,0BAA0B;CAAE;AAEhC;EACE,cAAc;EACd,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;CAAE;AACnB;IACE,eAAe;IACf,iBAAiB;IACjB,aAAa;IACb,aAAa;IACb,YAAY;CAAE;AAElB;EACE,qBAAqB;CAAE;AAEzB;EACE,uBAAuB;EACvB,iBAAiB;EACjB,mBAAmB;EACnB,YAAY;EACZ,uBAAuB;EACvB,YAAY;CAAE;AAEhB;EACE,gBAAgB;EAChB,iBAAiB;EACjB,YAAY;CAAE;AAEhB;EACE,0BAA0B;EAC1B,YAAY;CAAE",file:"vue-tags-input.scss?vue&type=style&index=0&id=61d92e31&lang=scss&scoped=true&",sourcesContent:['@font-face {\n  font-family: \'icomoon\';\n  src: url("./assets/fonts/icomoon.eot?7grlse");\n  src: url("./assets/fonts/icomoon.eot?7grlse#iefix") format("embedded-opentype"), url("./assets/fonts/icomoon.ttf?7grlse") format("truetype"), url("./assets/fonts/icomoon.woff?7grlse") format("woff");\n  font-weight: normal;\n  font-style: normal; }\n\n[class^="ti-icon-"], [class*=" ti-icon-"] {\n  font-family: \'icomoon\' !important;\n  speak: none;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale; }\n\n.ti-icon-check:before {\n  content: "\\e902"; }\n\n.ti-icon-close:before {\n  content: "\\e901"; }\n\n.ti-icon-undo:before {\n  content: "\\e900"; }\n\nul {\n  margin: 0px;\n  padding: 0px;\n  list-style-type: none; }\n\n*, *:before, *:after {\n  box-sizing: border-box; }\n\ninput:focus {\n  outline: none; }\n\ninput[disabled] {\n  background-color: transparent; }\n\n.vue-tags-input {\n  max-width: 450px;\n  position: relative;\n  background-color: #fff; }\n\ndiv.vue-tags-input.disabled {\n  opacity: 0.5; }\n  div.vue-tags-input.disabled * {\n    cursor: default; }\n\n.ti-input {\n  border: 1px solid #ccc;\n  display: flex;\n  padding: 4px;\n  flex-wrap: wrap; }\n\n.ti-tags {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  line-height: 1em; }\n\n.ti-tag {\n  background-color: #5C6BC0;\n  color: #fff;\n  border-radius: 2px;\n  display: flex;\n  padding: 3px 5px;\n  margin: 2px;\n  font-size: .85em; }\n  .ti-tag:focus {\n    outline: none; }\n  .ti-tag .ti-content {\n    display: flex;\n    align-items: center; }\n  .ti-tag .ti-tag-center {\n    position: relative; }\n  .ti-tag span {\n    line-height: .85em; }\n  .ti-tag span.ti-hidden {\n    padding-left: 14px;\n    visibility: hidden;\n    height: 0px;\n    white-space: pre; }\n  .ti-tag .ti-actions {\n    margin-left: 2px;\n    display: flex;\n    align-items: center;\n    font-size: 1.15em; }\n    .ti-tag .ti-actions i {\n      cursor: pointer; }\n  .ti-tag:last-child {\n    margin-right: 4px; }\n  .ti-tag.ti-invalid, .ti-tag.ti-tag.ti-deletion-mark {\n    background-color: #e54d42; }\n\n.ti-new-tag-input-wrapper {\n  display: flex;\n  flex: 1 0 auto;\n  padding: 3px 5px;\n  margin: 2px;\n  font-size: .85em; }\n  .ti-new-tag-input-wrapper input {\n    flex: 1 0 auto;\n    min-width: 100px;\n    border: none;\n    padding: 0px;\n    margin: 0px; }\n\n.ti-new-tag-input {\n  line-height: initial; }\n\n.ti-autocomplete {\n  border: 1px solid #ccc;\n  border-top: none;\n  position: absolute;\n  width: 100%;\n  background-color: #fff;\n  z-index: 20; }\n\n.ti-item > div {\n  cursor: pointer;\n  padding: 3px 6px;\n  width: 100%; }\n\n.ti-selected-item {\n  background-color: #5C6BC0;\n  color: #fff; }\n'],sourceRoot:""}])},function(A,t,e){"use strict";A.exports=function(A){return"string"!=typeof A?A:(/^['"].*['"]$/.test(A)&&(A=A.slice(1,-1)),/["'() \t\n]/.test(A)?'"'+A.replace(/"/g,'\\"').replace(/\n/g,"\\n")+'"':A)}},function(A,t){A.exports="data:font/ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBawAAAC8AAAAYGNtYXAXVtKJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZqWfozAAAAF4AAAA/GhlYWQPxZgIAAACdAAAADZoaGVhB4ADyAAAAqwAAAAkaG10eBIAAb4AAALQAAAAHGxvY2EAkgDiAAAC7AAAABBtYXhwAAkAHwAAAvwAAAAgbmFtZZlKCfsAAAMcAAABhnBvc3QAAwAAAAAEpAAAACAAAwOAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QL//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAFYBAQO+AoEAHAAAATIXHgEXFhcHJicuAScmIyIGBxchERc2Nz4BNzYCFkpDQ28pKRdkECAfVTM0OT9wLZz+gJgdIiJLKSgCVRcYUjg5QiAzKys+ERIrJZoBgJoZFRQcCAgAAQDWAIEDKgLVAAsAAAEHFwcnByc3JzcXNwMq7u487u487u487u4Cme7uPO7uPO7uPO7uAAEAkgCBA4ACvQAFAAAlARcBJzcBgAHEPP4A7jz5AcQ8/gDuPAAAAAABAAAAAAAAH8nTUV8PPPUACwQAAAAAANZ1KhsAAAAA1nUqGwAAAAADvgLVAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAO+AAEAAAAAAAAAAAAAAAAAAAAHBAAAAAAAAAAAAAAAAgAAAAQAAFYEAADWBAAAkgAAAAAACgAUAB4AUABqAH4AAQAAAAcAHQABAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="},function(A,t){A.exports="data:font/woff;base64,d09GRgABAAAAAAUQAAsAAAAABMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFrGNtYXAAAAFoAAAAVAAAAFQXVtKJZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAAPwAAAD8pZ+jMGhlYWQAAALAAAAANgAAADYPxZgIaGhlYQAAAvgAAAAkAAAAJAeAA8hobXR4AAADHAAAABwAAAAcEgABvmxvY2EAAAM4AAAAEAAAABAAkgDibWF4cAAAA0gAAAAgAAAAIAAJAB9uYW1lAAADaAAAAYYAAAGGmUoJ+3Bvc3QAAATwAAAAIAAAACAAAwAAAAMDgAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QIDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkC//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQBWAQEDvgKBABwAAAEyFx4BFxYXByYnLgEnJiMiBgcXIREXNjc+ATc2AhZKQ0NvKSkXZBAgH1UzNDk/cC2c/oCYHSIiSykoAlUXGFI4OUIgMysrPhESKyWaAYCaGRUUHAgIAAEA1gCBAyoC1QALAAABBxcHJwcnNyc3FzcDKu7uPO7uPO7uPO7uApnu7jzu7jzu7jzu7gABAJIAgQOAAr0ABQAAJQEXASc3AYABxDz+AO48+QHEPP4A7jwAAAAAAQAAAAAAAB/J01FfDzz1AAsEAAAAAADWdSobAAAAANZ1KhsAAAAAA74C1QAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADvgABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABWBAAA1gQAAJIAAAAAAAoAFAAeAFAAagB+AAEAAAAHAB0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"},function(A,t,e){"use strict";e.r(t);var n=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{staticClass:"vue-tags-input",class:[{"ti-disabled":A.disabled},{"ti-focus":A.focused}]},[e("div",{staticClass:"ti-input"},[A.tagsCopy?e("ul",{staticClass:"ti-tags"},[A._l(A.tagsCopy,function(t,n){return e("li",{key:n,staticClass:"ti-tag",class:[{"ti-editing":A.tagsEditStatus[n]},t.tiClasses,t.classes,{"ti-deletion-mark":A.isMarked(n)}],style:t.style,attrs:{tabindex:n+1},on:{click:function(e){A.$emit("tag-clicked",{tag:t,index:n})}}},[e("div",{staticClass:"ti-content"},[A.$scopedSlots["tag-left"]?e("div",{staticClass:"ti-tag-left"},[A._t("tag-left",null,{tag:t,index:n,edit:A.tagsEditStatus[n],performSaveEdit:A.performSaveTag,performDelete:A.performDeleteTag,performCancelEdit:A.cancelEdit,performOpenEdit:A.performEditTag,deletionMark:A.isMarked(n)})],2):A._e(),A._v(" "),e("div",{ref:"tagCenter",refInFor:!0,staticClass:"ti-tag-center"},[A.$scopedSlots["tag-center"]?A._e():e("span",{class:{"ti-hidden":A.tagsEditStatus[n]},on:{click:function(t){A.performEditTag(n)}}},[A._v(A._s(t.text))]),A._v(" "),A.$scopedSlots["tag-center"]?A._e():e("tag-input",{attrs:{scope:{edit:A.tagsEditStatus[n],maxlength:A.maxlength,tag:t,index:n,validateTag:A.createChangedTag,performCancelEdit:A.cancelEdit,performSaveEdit:A.performSaveTag}}}),A._v(" "),A._t("tag-center",null,{tag:t,index:n,maxlength:A.maxlength,edit:A.tagsEditStatus[n],performSaveEdit:A.performSaveTag,performDelete:A.performDeleteTag,performCancelEdit:A.cancelEdit,validateTag:A.createChangedTag,performOpenEdit:A.performEditTag,deletionMark:A.isMarked(n)})],2),A._v(" "),A.$scopedSlots["tag-right"]?e("div",{staticClass:"ti-tag-right"},[A._t("tag-right",null,{tag:t,index:n,edit:A.tagsEditStatus[n],performSaveEdit:A.performSaveTag,performDelete:A.performDeleteTag,performCancelEdit:A.cancelEdit,performOpenEdit:A.performEditTag,deletionMark:A.isMarked(n)})],2):A._e()]),A._v(" "),e("div",{staticClass:"ti-actions"},[A.$scopedSlots["tag-actions"]?A._e():e("i",{directives:[{name:"show",rawName:"v-show",value:A.tagsEditStatus[n],expression:"tagsEditStatus[index]"}],staticClass:"ti-icon-undo",on:{click:function(t){A.cancelEdit(n)}}}),A._v(" "),A.$scopedSlots["tag-actions"]?A._e():e("i",{directives:[{name:"show",rawName:"v-show",value:!A.tagsEditStatus[n],expression:"!tagsEditStatus[index]"}],staticClass:"ti-icon-close",on:{click:function(t){A.performDeleteTag(n)}}}),A._v(" "),A.$scopedSlots["tag-actions"]?A._t("tag-actions",null,{tag:t,index:n,edit:A.tagsEditStatus[n],performSaveEdit:A.performSaveTag,performDelete:A.performDeleteTag,performCancelEdit:A.cancelEdit,performOpenEdit:A.performEditTag,deletionMark:A.isMarked(n)}):A._e()],2)])}),A._v(" "),e("li",{staticClass:"ti-new-tag-input-wrapper"},[e("input",A._b({ref:"newTagInput",staticClass:"ti-new-tag-input",class:[A.createClasses(A.newTag,A.tags,A.validation,A.isDuplicate)],attrs:{placeholder:A.placeholder,maxlength:A.maxlength,disabled:A.disabled,type:"text",size:"1"},domProps:{value:A.newTag},on:{keydown:[function(t){A.performAddTags(A.filteredAutocompleteItems[A.selectedItem]||A.newTag,t)},function(t){return"button"in t||8===t.keyCode?A.invokeDelete(t):null},function(t){if(!("button"in t)&&38!==t.keyCode)return null;A.selectItem(t,"before")},function(t){if(!("button"in t)&&40!==t.keyCode)return null;A.selectItem(t,"after")}],paste:A.addTagsFromPaste,input:A.updateNewTag,blur:function(t){A.$emit("blur",t)},focus:function(t){A.focused=!0,A.$emit("focus",t)},click:function(t){!A.addOnlyFromAutocomplete&&(A.selectedItem=null)}}},"input",A.$attrs,!1))])],2):A._e()]),A._v(" "),A._t("between-elements"),A._v(" "),A.autocompleteOpen?e("div",{staticClass:"ti-autocomplete",on:{mouseout:function(t){A.selectedItem=null}}},[A._t("autocomplete-header"),A._v(" "),e("ul",A._l(A.filteredAutocompleteItems,function(t,n){return e("li",{key:n,staticClass:"ti-item",class:[t.tiClasses,t.classes,{"ti-selected-item":A.isSelected(n)}],style:t.style,on:{mouseover:function(t){!A.disabled&&(A.selectedItem=n)}}},[A.$scopedSlots["autocomplete-item"]?A._t("autocomplete-item",null,{item:t,index:n,performAdd:function(t){return A.performAddTags(t,void 0,"autocomplete")},selected:A.isSelected(n)}):e("div",{on:{click:function(e){A.performAddTags(t,void 0,"autocomplete")}}},[A._v("\n          "+A._s(t.text)+"\n        ")])],2)}),0),A._v(" "),A._t("autocomplete-footer")],2):A._e()],2)};n._withStripped=!0;var i=e(5),a=e.n(i),o=function(A){return JSON.parse(JSON.stringify(A))},r=function(A,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],n=arguments.length>3?arguments[3]:void 0;void 0===A.text&&(A={text:A});var i=function(A,t){return t.filter(function(t){var e=A.text;return"string"==typeof t.rule?!new RegExp(t.rule).test(e):t.rule instanceof RegExp?!t.rule.test(e):"[object Function]"==={}.toString.call(t.rule)?t.rule(A):void 0}).map(function(A){return A.classes})}(A,e),a=function(A,t){for(var e=0;e<A.length;){if(t(A[e],e,A))return e;e++}return-1}(t,function(t){return t===A}),r=o(t),s=-1!==a?r.splice(a,1)[0]:o(A);return(n?n(r,s):-1!==r.map(function(A){return A.text}).indexOf(s.text))&&i.push("ti-duplicate"),0===i.length?i.push("ti-valid"):i.push("ti-invalid"),i},s=function(A){void 0===A.text&&(A={text:A});for(var t=o(A),e=arguments.length,n=new Array(e>1?e-1:0),i=1;i<e;i++)n[i-1]=arguments[i];return t.tiClasses=r.apply(void 0,[A].concat(n)),t},u=function(A){for(var t=arguments.length,e=new Array(t>1?t-1:0),n=1;n<t;n++)e[n-1]=arguments[n];return A.map(function(t){return s.apply(void 0,[t,A].concat(e))})},c=function(){var A=this,t=A.$createElement,e=A._self._c||t;return A.scope.edit?e("input",{directives:[{name:"model",rawName:"v-model",value:A.scope.tag.text,expression:"scope.tag.text"}],staticClass:"ti-tag-input",attrs:{maxlength:A.scope.maxlength,type:"text",size:"1"},domProps:{value:A.scope.tag.text},on:{input:[function(t){t.target.composing||A.$set(A.scope.tag,"text",t.target.value)},function(t){A.scope.validateTag(A.scope.index,t)}],blur:function(t){A.scope.performCancelEdit(A.scope.index)},keydown:function(t){A.scope.performSaveEdit(A.scope.index,t)}}}):A._e()};c._withStripped=!0;var d={name:"TagInput",props:{scope:{type:Object}}};e(7);function l(A,t,e,n,i,a,o,r){var s,u="function"==typeof A?A.options:A;if(t&&(u.render=t,u.staticRenderFns=e,u._compiled=!0),n&&(u.functional=!0),a&&(u._scopeId="data-v-"+a),o?(s=function(A){(A=A||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(A=__VUE_SSR_CONTEXT__),i&&i.call(this,A),A&&A._registeredComponents&&A._registeredComponents.add(o)},u._ssrRegister=s):i&&(s=r?function(){i.call(this,this.$root.$options.shadowRoot)}:i),s)if(u.functional){u._injectStyles=s;var c=u.render;u.render=function(A,t){return s.call(t),c(A,t)}}else{var d=u.beforeCreate;u.beforeCreate=d?[].concat(d,s):[s]}return{exports:A,options:u}}var p=l(d,c,[],!1,null,"108f4f13",null);p.options.__file="vue-tags-input/tag-input.vue";var g=p.exports,f=function(A){return!A.some(function(A){var t=!A.text;t&&console.warn('Missing property "text"',A);var e=!1;return A.classes&&(e="string"!=typeof A.classes),e&&console.warn('Property "classes" must be type of string',A),t||e})},B=function(A){return!A.some(function(A){if("number"==typeof A){var t=isFinite(A)&&Math.floor(A)===A;return t||console.warn("Only numerics are allowed for this prop. Found:",A),!t}if("string"==typeof A){var e=/\W|[a-z]|!\d/i.test(A);return e||console.warn("Only alpha strings are allowed for this prop. Found:",A),!e}return console.warn("Only numeric and string values are allowed. Found:",A),!1})},v={value:{type:String,default:"",required:!0},tags:{type:Array,default:function(){return[]},validator:f},autocompleteItems:{type:Array,default:function(){return[]},validator:f},allowEditTags:{type:Boolean,default:!1},autocompleteFilterDuplicates:{default:!0,type:Boolean},addOnlyFromAutocomplete:{type:Boolean,default:!1},autocompleteMinLength:{type:Number,default:1},autocompleteAlwaysOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},placeholder:{type:String,default:"Add Tag"},addOnKey:{type:Array,default:function(){return[13]},validator:B},saveOnKey:{type:Array,default:function(){return[13]},validator:B},maxTags:{type:Number},maxlength:{type:Number},validation:{type:Array,default:function(){return[]},validator:function(A){return!A.some(function(A){var t=!A.rule;t&&console.warn('Property "rule" is missing',A);var e=A.rule&&("string"==typeof A.rule||A.rule instanceof RegExp||"[object Function]"==={}.toString.call(A.rule));e||console.warn("A rule must be type of string, RegExp or function. Found:",JSON.stringify(A.rule));var n=!A.classes;n&&console.warn('Property "classes" is missing',A);var i=A.type&&"string"!=typeof A.type;return i&&console.warn('Property "type" must be type of string. Found:',A),!e||t||n||i})}},separators:{type:Array,default:function(){return[";"]},validator:function(A){return!A.some(function(A){var t="string"!=typeof A;return t&&console.warn("Separators must be type of string. Found:",A),t})}},avoidAddingDuplicates:{type:Boolean,default:!0},addOnBlur:{type:Boolean,default:!0},isDuplicate:{type:Function,default:null},addFromPaste:{type:Boolean,default:!0},deleteOnBackspace:{default:!0,type:Boolean}};function h(A){return(h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(A){return typeof A}:function(A){return A&&"function"==typeof Symbol&&A.constructor===Symbol&&A!==Symbol.prototype?"symbol":typeof A})(A)}var m={name:"VueTagsInput",components:{TagInput:g},props:v,data:function(){return{newTag:null,tagsCopy:null,tagsEditStatus:null,deletionMark:null,deletionMarkTime:null,selectedItem:null,focused:null}},computed:{autocompleteOpen:function(){return!!this.autocompleteAlwaysOpen||null!==this.newTag&&this.newTag.length>=this.autocompleteMinLength&&this.filteredAutocompleteItems.length>0&&this.focused},filteredAutocompleteItems:function(){var A=this,t=this.autocompleteItems.map(function(t){return s(t,A.tags,A.validation,A.isDuplicate)});return this.autocompleteFilterDuplicates?t.filter(this.duplicateFilter):t}},methods:{createClasses:r,getSelectedIndex:function(A){var t=this.filteredAutocompleteItems,e=this.selectedItem,n=t.length-1;if(0!==t.length)return null===e?0:"before"===A&&0===e?n:"after"===A&&e===n?0:"after"===A?e+1:e-1},selectDefaultItem:function(){this.addOnlyFromAutocomplete&&this.filteredAutocompleteItems.length>0?this.selectedItem=0:this.selectedItem=null},selectItem:function(A,t){A.preventDefault(),this.selectedItem=this.getSelectedIndex(t)},isSelected:function(A){return this.selectedItem===A},isMarked:function(A){return this.deletionMark===A},invokeDelete:function(){var A=this;if(this.deleteOnBackspace&&!(this.newTag.length>0)){var t=this.tagsCopy.length-1;null===this.deletionMark?(this.deletionMarkTime=setTimeout(function(){return A.deletionMark=null},1e3),this.deletionMark=t):this.performDeleteTag(t)}},addTagsFromPaste:function(){var A=this;this.addFromPaste&&setTimeout(function(){return A.performAddTags(A.newTag)},10)},performEditTag:function(A){var t=this;this.allowEditTags&&(this._events["before-editing-tag"]||this.editTag(A),this.$emit("before-editing-tag",{index:A,tag:this.tagsCopy[A],editTag:function(){return t.editTag(A)}}))},editTag:function(A){this.allowEditTags&&(this.toggleEditMode(A),this.focus(A))},toggleEditMode:function(A){this.allowEditTags&&!this.disabled&&this.$set(this.tagsEditStatus,A,!this.tagsEditStatus[A])},createChangedTag:function(A,t){var e=this.tagsCopy[A];e.text=t?t.target.value:this.tagsCopy[A].text,this.$set(this.tagsCopy,A,s(e,this.tagsCopy,this.validation,this.isDuplicate))},focus:function(A){var t=this;this.$nextTick(function(){var e=t.$refs.tagCenter[A].querySelector("input.ti-tag-input");e&&e.focus()})},quote:function(A){return A.replace(/([()[{*+.$^\\|?])/g,"\\$1")},cancelEdit:function(A){this.tags[A]&&(this.tagsCopy[A]=o(s(this.tags[A],this.tags,this.validation,this.isDuplicate)),this.$set(this.tagsEditStatus,A,!1))},hasForbiddingAddRule:function(A){var t=this;return A.some(function(A){var e=t.validation.find(function(t){return A===t.classes});return!!e&&e.disableAdd})},createTagTexts:function(A){var t=this,e=new RegExp(this.separators.map(function(A){return t.quote(A)}).join("|"));return A.split(e).map(function(A){return{text:A}})},performDeleteTag:function(A){var t=this;this._events["before-deleting-tag"]||this.deleteTag(A),this.$emit("before-deleting-tag",{index:A,tag:this.tagsCopy[A],deleteTag:function(){return t.deleteTag(A)}})},deleteTag:function(A){this.disabled||(this.deletionMark=null,clearTimeout(this.deletionMarkTime),this.tagsCopy.splice(A,1),this._events["update:tags"]&&this.$emit("update:tags",this.tagsCopy),this.$emit("tags-changed",this.tagsCopy))},noTriggerKey:function(A,t){var e=-1!==this[t].indexOf(A.keyCode)||-1!==this[t].indexOf(A.key);return e&&A.preventDefault(),!e},performAddTags:function(A,t,e){var n=this;if(!(this.disabled||t&&this.noTriggerKey(t,"addOnKey"))){var i=[];"object"===h(A)&&(i=[A]),"string"==typeof A&&(i=this.createTagTexts(A)),(i=i.filter(function(A){return A.text.trim().length>0})).forEach(function(A){A=s(A,n.tags,n.validation,n.isDuplicate),n._events["before-adding-tag"]||n.addTag(A,e),n.$emit("before-adding-tag",{tag:A,addTag:function(){return n.addTag(A,e)}})})}},duplicateFilter:function(A){return this.isDuplicate?!this.isDuplicate(this.tagsCopy,A):!this.tagsCopy.find(function(t){return t.text===A.text})},addTag:function(A){var t=this,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"new-tag-input",n=this.filteredAutocompleteItems.map(function(A){return A.text});this.addOnlyFromAutocomplete&&-1===n.indexOf(A.text)||this.$nextTick(function(){return t.maxTags&&t.maxTags<=t.tagsCopy.length?t.$emit("max-tags-reached",A):t.avoidAddingDuplicates&&!t.duplicateFilter(A)?t.$emit("adding-duplicate",A):void(t.hasForbiddingAddRule(A.tiClasses)||(t.$emit("input",""),t.tagsCopy.push(A),t._events["update:tags"]&&t.$emit("update:tags",t.tagsCopy),"autocomplete"===e&&t.$refs.newTagInput.focus(),t.$emit("tags-changed",t.tagsCopy)))})},performSaveTag:function(A,t){var e=this,n=this.tagsCopy[A];this.disabled||t&&this.noTriggerKey(t,"addOnKey")||0!==n.text.trim().length&&(this._events["before-saving-tag"]||this.saveTag(A,n),this.$emit("before-saving-tag",{index:A,tag:n,saveTag:function(){return e.saveTag(A,n)}}))},saveTag:function(A,t){if(this.avoidAddingDuplicates){var e=o(this.tagsCopy),n=e.splice(A,1)[0];if(this.isDuplicate?this.isDuplicate(e,n):-1!==e.map(function(A){return A.text}).indexOf(n.text))return this.$emit("saving-duplicate",t)}this.hasForbiddingAddRule(t.tiClasses)||(this.$set(this.tagsCopy,A,t),this.toggleEditMode(A),this._events["update:tags"]&&this.$emit("update:tags",this.tagsCopy),this.$emit("tags-changed",this.tagsCopy))},tagsEqual:function(){var A=this;return!this.tagsCopy.some(function(t,e){return!a()(t,A.tags[e])})},updateNewTag:function(A){var t=A.target.value;this.newTag=t,this.$emit("input",t)},initTags:function(){this.tagsCopy=u(this.tags,this.validation,this.isDuplicate),this.tagsEditStatus=o(this.tags).map(function(){return!1}),this._events["update:tags"]&&!this.tagsEqual()&&this.$emit("update:tags",this.tagsCopy)},blurred:function(A){this.$el.contains(A.target)||(this.addOnBlur&&this.focused&&this.performAddTags(this.newTag),this.focused=!1)}},watch:{value:function(A){this.addOnlyFromAutocomplete||(this.selectedItem=null),this.newTag=A},tags:{handler:function(){this.initTags()},deep:!0},autocompleteOpen:"selectDefaultItem"},created:function(){this.newTag=this.value,this.initTags()},mounted:function(){this.selectDefaultItem(),document.addEventListener("click",this.blurred)},destroyed:function(){document.removeEventListener("click",this.blurred)}},C=(e(9),l(m,n,[],!1,null,"61d92e31",null));C.options.__file="vue-tags-input/vue-tags-input.vue";var E=C.exports;e.d(t,"VueTagsInput",function(){return E}),e.d(t,"createClasses",function(){return r}),e.d(t,"createTag",function(){return s}),e.d(t,"createTags",function(){return u}),e.d(t,"TagInput",function(){return g}),E.install=function(A){return A.component(E.name,E)},"undefined"!=typeof window&&window.Vue&&window.Vue.use(E);t.default=E}])});
 //# sourceMappingURL=vue-tags-input.js.map
 
 /***/ }),
-/* 83 */
+/* 98 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
-  return _c("div", { staticClass: "form-group" }, [
-    _c(
-      "div",
-      { staticClass: "col-sm-12" },
-      [
-        _c("vue-tags-input", {
-          attrs: {
-            tags: _vm.tags,
-            classes: "form-input",
-            "autocomplete-items": _vm.autocompleteItems,
-            "add-only-from-autocomplete": false,
-            placeholder: "Tags"
-          },
-          on: { "tags-changed": _vm.update },
-          model: {
-            value: _vm.tag,
-            callback: function($$v) {
-              _vm.tag = $$v
+  return _c(
+    "div",
+    { staticClass: "form-group", class: { "has-error": _vm.hasError() } },
+    [
+      _c(
+        "div",
+        { staticClass: "col-sm-12" },
+        [
+          _c("vue-tags-input", {
+            attrs: {
+              tags: _vm.tags,
+              classes: "form-input",
+              "autocomplete-items": _vm.autocompleteItems,
+              "add-only-from-autocomplete": false,
+              placeholder: "Tags"
             },
-            expression: "tag"
-          }
-        })
-      ],
-      1
-    )
-  ])
+            on: { "tags-changed": _vm.update },
+            model: {
+              value: _vm.tag,
+              callback: function($$v) {
+                _vm.tag = $$v
+              },
+              expression: "tag"
+            }
+          }),
+          _vm._v(" "),
+          _vm._l(this.error, function(error) {
+            return _c("ul", { staticClass: "list-unstyled" }, [
+              _c("li", { staticClass: "text-danger" }, [_vm._v(_vm._s(error))])
+            ])
+          })
+        ],
+        2
+      )
+    ]
+  )
 }
 var staticRenderFns = []
 render._withStripped = true
@@ -50177,19 +50952,19 @@ if (false) {
 }
 
 /***/ }),
-/* 84 */
+/* 99 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(85)
+  __webpack_require__(100)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(87)
+var __vue_script__ = __webpack_require__(102)
 /* template */
-var __vue_template__ = __webpack_require__(88)
+var __vue_template__ = __webpack_require__(103)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -50228,13 +51003,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 85 */
+/* 100 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(86);
+var content = __webpack_require__(101);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -50254,7 +51029,7 @@ if(false) {
 }
 
 /***/ }),
-/* 86 */
+/* 101 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -50262,13 +51037,13 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 87 */
+/* 102 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -50330,12 +51105,16 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     name: "Category",
     props: {
         value: String,
         inputName: String,
+        error: Array,
         accountName: {
             type: String,
             default: ''
@@ -50357,6 +51136,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
     },
 
     methods: {
+        hasError: function hasError() {
+            return this.error.length > 0;
+        },
         handleInput: function handleInput(e) {
             if (typeof this.$refs.input.value === 'string') {
                 this.$emit('input', this.$refs.input.value);
@@ -50395,74 +51177,84 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 88 */
+/* 103 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
-  return _c("div", { staticClass: "form-group" }, [
-    _c(
-      "div",
-      { staticClass: "col-sm-12" },
-      [
-        _c("div", { staticClass: "input-group" }, [
-          _c("input", {
-            ref: "input",
-            staticClass: "form-control",
-            attrs: {
-              type: "text",
-              placeholder: "Category",
-              autocomplete: "off",
-              "data-role": "input",
-              name: "category[]",
-              title: "Category"
-            },
-            domProps: { value: _vm.value },
-            on: {
-              input: _vm.handleInput,
-              keypress: _vm.handleEnter,
-              submit: function($event) {
-                $event.preventDefault()
+  return _c(
+    "div",
+    { staticClass: "form-group", class: { "has-error": _vm.hasError() } },
+    [
+      _c(
+        "div",
+        { staticClass: "col-sm-12" },
+        [
+          _c("div", { staticClass: "input-group" }, [
+            _c("input", {
+              ref: "input",
+              staticClass: "form-control",
+              attrs: {
+                type: "text",
+                placeholder: "Category",
+                autocomplete: "off",
+                "data-role": "input",
+                name: "category[]",
+                title: "Category"
+              },
+              domProps: { value: _vm.value },
+              on: {
+                input: _vm.handleInput,
+                keypress: _vm.handleEnter,
+                submit: function($event) {
+                  $event.preventDefault()
+                }
               }
+            }),
+            _vm._v(" "),
+            _c("span", { staticClass: "input-group-btn" }, [
+              _c(
+                "button",
+                {
+                  staticClass: "btn btn-default",
+                  attrs: { type: "button" },
+                  on: { click: _vm.clearCategory }
+                },
+                [_c("i", { staticClass: "fa fa-trash-o" })]
+              )
+            ])
+          ]),
+          _vm._v(" "),
+          _c("typeahead", {
+            attrs: {
+              "open-on-empty": true,
+              "open-on-focus": true,
+              "async-src": _vm.categoryAutoCompleteURI,
+              target: _vm.target,
+              "item-key": "name"
+            },
+            on: { input: _vm.selectedItem },
+            model: {
+              value: _vm.name,
+              callback: function($$v) {
+                _vm.name = $$v
+              },
+              expression: "name"
             }
           }),
           _vm._v(" "),
-          _c("span", { staticClass: "input-group-btn" }, [
-            _c(
-              "button",
-              {
-                staticClass: "btn btn-default",
-                attrs: { type: "button" },
-                on: { click: _vm.clearCategory }
-              },
-              [_c("i", { staticClass: "fa fa-trash-o" })]
-            )
-          ])
-        ]),
-        _vm._v(" "),
-        _c("typeahead", {
-          attrs: {
-            "open-on-empty": true,
-            "open-on-focus": true,
-            "async-src": _vm.categoryAutoCompleteURI,
-            target: _vm.target,
-            "item-key": "name"
-          },
-          on: { input: _vm.selectedItem },
-          model: {
-            value: _vm.name,
-            callback: function($$v) {
-              _vm.name = $$v
-            },
-            expression: "name"
-          }
-        })
-      ],
-      1
-    )
-  ])
+          _vm._l(this.error, function(error) {
+            return _c("ul", { staticClass: "list-unstyled" }, [
+              _c("li", { staticClass: "text-danger" }, [_vm._v(_vm._s(error))])
+            ])
+          })
+        ],
+        2
+      )
+    ]
+  )
 }
 var staticRenderFns = []
 render._withStripped = true
@@ -50475,19 +51267,19 @@ if (false) {
 }
 
 /***/ }),
-/* 89 */
+/* 104 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(90)
+  __webpack_require__(105)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(92)
+var __vue_script__ = __webpack_require__(107)
 /* template */
-var __vue_template__ = __webpack_require__(93)
+var __vue_template__ = __webpack_require__(108)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -50526,13 +51318,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 90 */
+/* 105 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(91);
+var content = __webpack_require__(106);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -50552,7 +51344,7 @@ if(false) {
 }
 
 /***/ }),
-/* 91 */
+/* 106 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -50560,13 +51352,13 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 92 */
+/* 107 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -50602,10 +51394,14 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     name: "Amount",
-    props: ['source', 'destination', 'transactionType', 'value'],
+    props: ['source', 'destination', 'transactionType', 'value', 'error'],
     data: function data() {
         return {
             sourceAccount: this.source,
@@ -50619,6 +51415,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             this.$emit('input', this.$refs.amount.value);
         },
 
+        hasError: function hasError() {
+            return this.error.length > 0;
+        },
         changeData: function changeData() {
             if ('' === this.transactionType) {
                 $(this.$refs.cur).text(this.sourceAccount.currency_name);
@@ -50650,33 +51449,48 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 93 */
+/* 108 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
-  return _c("div", { staticClass: "form-group" }, [
-    _c("label", { ref: "cur", staticClass: "col-sm-4 control-label" }),
-    _vm._v(" "),
-    _c("div", { staticClass: "col-sm-8" }, [
-      _c("input", {
-        ref: "amount",
-        staticClass: "form-control",
-        attrs: {
-          type: "number",
-          step: "any",
-          name: "amount[]",
-          title: "amount",
-          autocomplete: "off",
-          placeholder: "Amount"
-        },
-        domProps: { value: _vm.value },
-        on: { input: _vm.handleInput }
-      })
-    ])
-  ])
+  return _c(
+    "div",
+    { staticClass: "form-group", class: { "has-error": _vm.hasError() } },
+    [
+      _c("label", { ref: "cur", staticClass: "col-sm-4 control-label" }),
+      _vm._v(" "),
+      _c(
+        "div",
+        { staticClass: "col-sm-8" },
+        [
+          _c("input", {
+            ref: "amount",
+            staticClass: "form-control",
+            attrs: {
+              type: "number",
+              step: "any",
+              name: "amount[]",
+              title: "amount",
+              autocomplete: "off",
+              placeholder: "Amount"
+            },
+            domProps: { value: _vm.value },
+            on: { input: _vm.handleInput }
+          }),
+          _vm._v(" "),
+          _vm._l(this.error, function(error) {
+            return _c("ul", { staticClass: "list-unstyled" }, [
+              _c("li", { staticClass: "text-danger" }, [_vm._v(_vm._s(error))])
+            ])
+          })
+        ],
+        2
+      )
+    ]
+  )
 }
 var staticRenderFns = []
 render._withStripped = true
@@ -50689,19 +51503,19 @@ if (false) {
 }
 
 /***/ }),
-/* 94 */
+/* 109 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(95)
+  __webpack_require__(110)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(97)
+var __vue_script__ = __webpack_require__(112)
 /* template */
-var __vue_template__ = __webpack_require__(98)
+var __vue_template__ = __webpack_require__(113)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -50740,13 +51554,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 95 */
+/* 110 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(96);
+var content = __webpack_require__(111);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -50766,7 +51580,7 @@ if(false) {
 }
 
 /***/ }),
-/* 96 */
+/* 111 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -50774,13 +51588,13 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 97 */
+/* 112 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -50829,10 +51643,14 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     name: "ForeignAmountSelect",
-    props: ['source', 'destination', 'transactionType', 'value'],
+    props: ['source', 'destination', 'transactionType', 'value', 'error'],
     mounted: function mounted() {
         this.loadCurrencies();
     },
@@ -50856,6 +51674,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         }
     },
     methods: {
+        hasError: function hasError() {
+            return this.error.length > 0;
+        },
         handleInput: function handleInput(e) {
             this.$emit('input', {
                 amount: +this.$refs.amount.value,
@@ -50927,66 +51748,81 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 98 */
+/* 113 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
-  return _c("div", { staticClass: "form-group" }, [
-    _c("div", { staticClass: "col-sm-4" }, [
-      this.enabledCurrencies.length > 0
-        ? _c(
-            "select",
-            {
-              ref: "currency_select",
-              staticClass: "form-control",
-              attrs: { name: "foreign_currency[]" },
-              on: { input: _vm.handleInput }
-            },
-            _vm._l(this.enabledCurrencies, function(currency) {
-              return currency.enabled
-                ? _c(
-                    "option",
-                    {
-                      attrs: { label: currency.name },
-                      domProps: { value: currency.id }
-                    },
-                    [
-                      _vm._v(
-                        "\n                " +
-                          _vm._s(currency.name) +
-                          "\n            "
-                      )
-                    ]
-                  )
-                : _vm._e()
-            }),
-            0
-          )
-        : _vm._e()
-    ]),
-    _vm._v(" "),
-    _c("div", { staticClass: "col-sm-8" }, [
-      this.enabledCurrencies.length > 0
-        ? _c("input", {
-            ref: "amount",
-            staticClass: "form-control",
-            attrs: {
-              type: "number",
-              step: "any",
-              name: "foreign_amount[]",
-              title: "Foreign amount",
-              autocomplete: "off",
-              placeholder: "Foreign amount"
-            },
-            domProps: { value: _vm.value.amount },
-            on: { input: _vm.handleInput }
+  return _c(
+    "div",
+    { staticClass: "form-group", class: { "has-error": _vm.hasError() } },
+    [
+      _c("div", { staticClass: "col-sm-4" }, [
+        this.enabledCurrencies.length > 0
+          ? _c(
+              "select",
+              {
+                ref: "currency_select",
+                staticClass: "form-control",
+                attrs: { name: "foreign_currency[]" },
+                on: { input: _vm.handleInput }
+              },
+              _vm._l(this.enabledCurrencies, function(currency) {
+                return currency.enabled
+                  ? _c(
+                      "option",
+                      {
+                        attrs: { label: currency.name },
+                        domProps: { value: currency.id }
+                      },
+                      [
+                        _vm._v(
+                          "\n                " +
+                            _vm._s(currency.name) +
+                            "\n            "
+                        )
+                      ]
+                    )
+                  : _vm._e()
+              }),
+              0
+            )
+          : _vm._e()
+      ]),
+      _vm._v(" "),
+      _c(
+        "div",
+        { staticClass: "col-sm-8" },
+        [
+          this.enabledCurrencies.length > 0
+            ? _c("input", {
+                ref: "amount",
+                staticClass: "form-control",
+                attrs: {
+                  type: "number",
+                  step: "any",
+                  name: "foreign_amount[]",
+                  title: "Foreign amount",
+                  autocomplete: "off",
+                  placeholder: "Foreign amount"
+                },
+                domProps: { value: _vm.value.amount },
+                on: { input: _vm.handleInput }
+              })
+            : _vm._e(),
+          _vm._v(" "),
+          _vm._l(this.error, function(error) {
+            return _c("ul", { staticClass: "list-unstyled" }, [
+              _c("li", { staticClass: "text-danger" }, [_vm._v(_vm._s(error))])
+            ])
           })
-        : _vm._e()
-    ])
-  ])
+        ],
+        2
+      )
+    ]
+  )
 }
 var staticRenderFns = []
 render._withStripped = true
@@ -50999,19 +51835,19 @@ if (false) {
 }
 
 /***/ }),
-/* 99 */
+/* 114 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(100)
+  __webpack_require__(115)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(102)
+var __vue_script__ = __webpack_require__(117)
 /* template */
-var __vue_template__ = __webpack_require__(103)
+var __vue_template__ = __webpack_require__(118)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -51050,13 +51886,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 100 */
+/* 115 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(101);
+var content = __webpack_require__(116);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -51076,7 +51912,7 @@ if(false) {
 }
 
 /***/ }),
-/* 101 */
+/* 116 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -51090,7 +51926,7 @@ exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\
 
 
 /***/ }),
-/* 102 */
+/* 117 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -51183,7 +52019,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 103 */
+/* 118 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -51211,19 +52047,19 @@ if (false) {
 }
 
 /***/ }),
-/* 104 */
+/* 119 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(105)
+  __webpack_require__(120)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(107)
+var __vue_script__ = __webpack_require__(122)
 /* template */
-var __vue_template__ = __webpack_require__(108)
+var __vue_template__ = __webpack_require__(123)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -51262,13 +52098,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 105 */
+/* 120 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(106);
+var content = __webpack_require__(121);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -51288,7 +52124,7 @@ if(false) {
 }
 
 /***/ }),
-/* 106 */
+/* 121 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -51296,13 +52132,13 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 107 */
+/* 122 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -51363,6 +52199,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
+//
+//
+//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     props: {
@@ -51370,6 +52209,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         title: String,
         index: Number,
         transactionType: String,
+        error: Array,
         accountName: {
             type: String,
             default: ''
@@ -51415,6 +52255,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         }
     },
     methods: {
+        hasError: function hasError() {
+            return this.error.length > 0;
+        },
         triggerTransactionType: function triggerTransactionType() {
             if (null === this.transactionType) {
                 return;
@@ -51464,74 +52307,84 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 108 */
+/* 123 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
   var _vm = this
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
-  return _c("div", { staticClass: "form-group" }, [
-    _c(
-      "div",
-      { staticClass: "col-sm-12" },
-      [
-        _c("div", { staticClass: "input-group" }, [
-          _c("input", {
-            ref: "input",
-            staticClass: "form-control",
-            attrs: {
-              type: "text",
-              placeholder: _vm.title,
-              "data-index": _vm.index,
-              autocomplete: "off",
-              "data-role": "input",
-              disabled: _vm.inputDisabled,
-              name: _vm.inputName,
-              title: _vm.title
-            },
-            on: {
-              keypress: _vm.handleEnter,
-              submit: function($event) {
-                $event.preventDefault()
+  return _c(
+    "div",
+    { staticClass: "form-group", class: { "has-error": _vm.hasError() } },
+    [
+      _c(
+        "div",
+        { staticClass: "col-sm-12" },
+        [
+          _c("div", { staticClass: "input-group" }, [
+            _c("input", {
+              ref: "input",
+              staticClass: "form-control",
+              attrs: {
+                type: "text",
+                placeholder: _vm.title,
+                "data-index": _vm.index,
+                autocomplete: "off",
+                "data-role": "input",
+                disabled: _vm.inputDisabled,
+                name: _vm.inputName,
+                title: _vm.title
+              },
+              on: {
+                keypress: _vm.handleEnter,
+                submit: function($event) {
+                  $event.preventDefault()
+                }
               }
+            }),
+            _vm._v(" "),
+            _c("span", { staticClass: "input-group-btn" }, [
+              _c(
+                "button",
+                {
+                  staticClass: "btn btn-default",
+                  attrs: { type: "button" },
+                  on: { click: _vm.clearSource }
+                },
+                [_c("i", { staticClass: "fa fa-trash-o" })]
+              )
+            ])
+          ]),
+          _vm._v(" "),
+          _c("typeahead", {
+            attrs: {
+              "open-on-empty": true,
+              "open-on-focus": true,
+              "async-src": _vm.accountAutoCompleteURI,
+              target: _vm.target,
+              "item-key": "name"
+            },
+            on: { input: _vm.selectedItem },
+            model: {
+              value: _vm.name,
+              callback: function($$v) {
+                _vm.name = $$v
+              },
+              expression: "name"
             }
           }),
           _vm._v(" "),
-          _c("span", { staticClass: "input-group-btn" }, [
-            _c(
-              "button",
-              {
-                staticClass: "btn btn-default",
-                attrs: { type: "button" },
-                on: { click: _vm.clearSource }
-              },
-              [_c("i", { staticClass: "fa fa-trash-o" })]
-            )
-          ])
-        ]),
-        _vm._v(" "),
-        _c("typeahead", {
-          attrs: {
-            "open-on-empty": true,
-            "open-on-focus": true,
-            "async-src": _vm.accountAutoCompleteURI,
-            target: _vm.target,
-            "item-key": "name"
-          },
-          on: { input: _vm.selectedItem },
-          model: {
-            value: _vm.name,
-            callback: function($$v) {
-              _vm.name = $$v
-            },
-            expression: "name"
-          }
-        })
-      ],
-      1
-    )
-  ])
+          _vm._l(this.error, function(error) {
+            return _c("ul", { staticClass: "list-unstyled" }, [
+              _c("li", { staticClass: "text-danger" }, [_vm._v(_vm._s(error))])
+            ])
+          })
+        ],
+        2
+      )
+    ]
+  )
 }
 var staticRenderFns = []
 render._withStripped = true
@@ -51544,19 +52397,19 @@ if (false) {
 }
 
 /***/ }),
-/* 109 */
+/* 124 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(110)
+  __webpack_require__(125)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(112)
+var __vue_script__ = __webpack_require__(127)
 /* template */
-var __vue_template__ = __webpack_require__(113)
+var __vue_template__ = __webpack_require__(128)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -51595,13 +52448,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 110 */
+/* 125 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(111);
+var content = __webpack_require__(126);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -51621,7 +52474,7 @@ if(false) {
 }
 
 /***/ }),
-/* 111 */
+/* 126 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -51635,7 +52488,7 @@ exports.push([module.i, "\n.action-link[data-v-5d1d7d82] {\n    cursor: pointer;
 
 
 /***/ }),
-/* 112 */
+/* 127 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -52003,7 +52856,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 });
 
 /***/ }),
-/* 113 */
+/* 128 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -52569,19 +53422,19 @@ if (false) {
 }
 
 /***/ }),
-/* 114 */
+/* 129 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(115)
+  __webpack_require__(130)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(117)
+var __vue_script__ = __webpack_require__(132)
 /* template */
-var __vue_template__ = __webpack_require__(118)
+var __vue_template__ = __webpack_require__(133)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -52620,13 +53473,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 115 */
+/* 130 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(116);
+var content = __webpack_require__(131);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -52646,7 +53499,7 @@ if(false) {
 }
 
 /***/ }),
-/* 116 */
+/* 131 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -52660,7 +53513,7 @@ exports.push([module.i, "\n.action-link[data-v-2ee9fe67] {\n    cursor: pointer;
 
 
 /***/ }),
-/* 117 */
+/* 132 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -52788,7 +53641,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 118 */
+/* 133 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -52908,19 +53761,19 @@ if (false) {
 }
 
 /***/ }),
-/* 119 */
+/* 134 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(120)
+  __webpack_require__(135)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(122)
+var __vue_script__ = __webpack_require__(137)
 /* template */
-var __vue_template__ = __webpack_require__(123)
+var __vue_template__ = __webpack_require__(138)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -52959,13 +53812,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 120 */
+/* 135 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(121);
+var content = __webpack_require__(136);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -52985,7 +53838,7 @@ if(false) {
 }
 
 /***/ }),
-/* 121 */
+/* 136 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -52999,7 +53852,7 @@ exports.push([module.i, "\n.action-link[data-v-89c53f18] {\n    cursor: pointer;
 
 
 /***/ }),
-/* 122 */
+/* 137 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -53324,7 +54177,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 });
 
 /***/ }),
-/* 123 */
+/* 138 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -53691,19 +54544,19 @@ if (false) {
 }
 
 /***/ }),
-/* 124 */
+/* 139 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var disposed = false
 function injectStyle (ssrContext) {
   if (disposed) return
-  __webpack_require__(125)
+  __webpack_require__(140)
 }
 var normalizeComponent = __webpack_require__(2)
 /* script */
-var __vue_script__ = __webpack_require__(127)
+var __vue_script__ = __webpack_require__(142)
 /* template */
-var __vue_template__ = __webpack_require__(128)
+var __vue_template__ = __webpack_require__(143)
 /* template functional */
 var __vue_template_functional__ = false
 /* styles */
@@ -53742,13 +54595,13 @@ module.exports = Component.exports
 
 
 /***/ }),
-/* 125 */
+/* 140 */
 /***/ (function(module, exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(126);
+var content = __webpack_require__(141);
 if(typeof content === 'string') content = [[module.i, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
@@ -53768,7 +54621,7 @@ if(false) {
 }
 
 /***/ }),
-/* 126 */
+/* 141 */
 /***/ (function(module, exports, __webpack_require__) {
 
 exports = module.exports = __webpack_require__(0)(false);
@@ -53776,17 +54629,27 @@ exports = module.exports = __webpack_require__(0)(false);
 
 
 // module
-exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
+exports.push([module.i, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", ""]);
 
 // exports
 
 
 /***/ }),
-/* 127 */
+/* 142 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__GroupDescription__ = __webpack_require__(14);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__GroupDescription___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__GroupDescription__);
+//
+//
+//
+//
+//
+//
+//
+//
 //
 //
 //
@@ -53954,9 +54817,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 
+
+
 /* harmony default export */ __webpack_exports__["default"] = ({
     name: "CreateTransaction",
-    components: {},
+    components: { GroupDescription: __WEBPACK_IMPORTED_MODULE_0__GroupDescription___default.a },
     mounted: function mounted() {
         this.addTransaction();
     },
@@ -53971,6 +54836,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             var transactionType = void 0;
             var firstSource = void 0;
             var firstDestination = void 0;
+            var foreignAmount = null;
+            var foreignCurrency = null;
+            var currentArray = void 0;
+
             if (this.transactions.length > 1) {
                 data.group_title = this.group_title;
             }
@@ -53996,7 +54865,8 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             for (var key in this.transactions) {
                 if (this.transactions.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
                     tagList = [];
-
+                    foreignAmount = null;
+                    foreignCurrency = null;
                     // loop tags
                     for (var tagKey in this.transactions[key].tags) {
                         if (this.transactions[key].tags.hasOwnProperty(tagKey) && /^0$|^[1-9]\d*$/.test(tagKey) && key <= 4294967294) {
@@ -54004,16 +54874,19 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
                         }
                     }
 
-                    data.transactions.push({
+                    // set foreign currency info:
+                    if (this.transactions[key].foreign_amount.amount !== '' && parseFloat(this.transactions[key].foreign_amount.amount) !== .00) {
+                        foreignAmount = this.transactions[key].foreign_amount.amount;
+                        foreignCurrency = this.transactions[key].foreign_amount.currency_id;
+                    }
+
+                    currentArray = {
                         type: transactionType,
                         date: this.transactions[key].date,
 
                         amount: this.transactions[key].amount,
                         currency_id: this.transactions[key].currency_id,
 
-                        foreign_amount: this.transactions[key].foreign_amount.amount,
-                        foreign_currency_id: this.transactions[key].foreign_amount.currency_id,
-
                         description: this.transactions[key].description,
 
                         source_id: this.transactions[key].source_account.id,
@@ -54022,10 +54895,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
                         destination_id: this.transactions[key].destination_account.id,
                         destination_name: this.transactions[key].destination_account.name,
 
-                        budget_id: this.transactions[key].budget,
                         category_name: this.transactions[key].category,
-                        piggy_bank_id: this.transactions[key].piggy_bank,
-                        tags: tagList,
+                        //budget_id: this.transactions[key].budget,
+                        //piggy_bank_id: this.transactions[key].piggy_bank,
+
 
                         interest_date: this.transactions[key].custom_fields.interest_date,
                         book_date: this.transactions[key].custom_fields.book_date,
@@ -54035,7 +54908,24 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
                         invoice_date: this.transactions[key].custom_fields.invoice_date,
                         internal_reference: this.transactions[key].custom_fields.internal_reference,
                         notes: this.transactions[key].custom_fields.notes
-                    });
+                    };
+
+                    if (tagList.length > 0) {
+                        currentArray.tags = tagList;
+                    }
+                    if (null !== foreignAmount) {
+                        currentArray.foreign_amount = foreignAmount;
+                        currentArray.foreign_currency_id = foreignCurrency;
+                    }
+                    // set budget id and piggy ID.
+                    if (parseInt(this.transactions[key].budget) > 0) {
+                        currentArray.budget_id = parseInt(this.transactions[key].budget);
+                    }
+                    if (parseInt(this.transactions[key].piggy_bank) > 0) {
+                        currentArray.piggy_bank_id = parseInt(this.transactions[key].piggy_bank);
+                    }
+
+                    data.transactions.push(currentArray);
                 }
             }
             //console.log(data);
@@ -54043,19 +54933,19 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             return data;
         },
         submit: function submit(e) {
+            var _this = this;
+
             var uri = './api/v1/transactions?_token=' + document.head.querySelector('meta[name="csrf-token"]').content;
             var data = this.convertData();
 
             axios.post(uri, data).then(function (response) {
-                console.log('OK!');
-                //console.log(response);
+                window.location.href = 'transactions/show/' + response.data.data.id + '?message=OK';
             }).catch(function (error) {
                 // give user errors things back.
-                console.log('error!');
-
                 // something something render errors.
 
                 console.log(error.response.data);
+                _this.parseErrors(error.response.data);
                 // something.
             });
             if (e) {
@@ -54063,6 +54953,80 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             }
         },
 
+        setDefaultErrors: function setDefaultErrors() {
+            for (var key in this.transactions) {
+                if (this.transactions.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
+                    this.transactions[key].errors = {
+                        source_account: [],
+                        destination_account: [],
+                        description: [],
+                        amount: [],
+                        date: [],
+                        budget_id: [],
+                        foreign_amount: [],
+                        category: [],
+                        piggy_bank: [],
+                        tags: [],
+                        // custom fields:
+                        custom_errors: {
+                            interest_date: [],
+                            book_date: [],
+                            process_date: [],
+                            due_date: [],
+                            payment_date: [],
+                            invoice_date: [],
+                            internal_reference: [],
+                            notes: [],
+                            attachments: []
+                        }
+                    };
+                }
+            }
+        },
+        parseErrors: function parseErrors(errors) {
+            this.setDefaultErrors();
+            this.invalid_submission = "";
+            if (errors.message.length > 0) {
+                this.invalid_submission = "There was something wrong with your submission. Please check out the errors below.";
+            }
+            var transactionIndex = void 0;
+            var fieldName = void 0;
+
+            for (var key in errors.errors) {
+                if (errors.errors.hasOwnProperty(key)) {
+                    if (key === 'group_title') {
+                        this.group_title_errors = errors.errors[key];
+                    }
+                    if (key !== 'group_title') {
+                        // lol dumbest way to explode "transactions.0.something" ever.
+                        transactionIndex = parseInt(key.split('.')[1]);
+                        fieldName = key.split('.')[2];
+                        // set error in this object thing.
+                        switch (fieldName) {
+                            case 'amount':
+                            case 'date':
+                            case 'budget_id':
+                            case 'description':
+                            case 'tags':
+                                this.transactions[transactionIndex].errors[fieldName] = errors.errors[key];
+                                break;
+                            case 'source_name':
+                            case 'source_id':
+                                this.transactions[transactionIndex].errors.source_account = this.transactions[transactionIndex].errors.source_account.concat(errors.errors[key]);
+                                break;
+                            case 'destination_name':
+                            case 'destination_id':
+                                this.transactions[transactionIndex].errors.destination_account = this.transactions[transactionIndex].errors.destination_account.concat(errors.errors[key]);
+                                break;
+                            case 'foreign_amount':
+                            case 'foreign_currency_id':
+                                this.transactions[transactionIndex].errors.foreign_amount = this.transactions[transactionIndex].errors.foreign_amount.concat(errors.errors[key]);
+                                break;
+                        }
+                    }
+                }
+            }
+        },
         addTransaction: function addTransaction(e) {
             this.transactions.push({
                 description: "",
@@ -54070,6 +55034,30 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
                 amount: "",
                 category: "",
                 piggy_bank: 0,
+                errors: {
+                    source_account: [],
+                    destination_account: [],
+                    description: [],
+                    amount: [],
+                    date: [],
+                    budget_id: [],
+                    foreign_amount: [],
+                    category: [],
+                    piggy_bank: [],
+                    tags: [],
+                    // custom fields:
+                    custom_errors: {
+                        interest_date: [],
+                        book_date: [],
+                        process_date: [],
+                        due_date: [],
+                        payment_date: [],
+                        invoice_date: [],
+                        internal_reference: [],
+                        notes: [],
+                        attachments: []
+                    }
+                },
                 budget: 0,
                 tags: [],
                 custom_fields: {
@@ -54132,7 +55120,6 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             }
 
             this.transactions.splice(index, 1);
-            console.log('Going to remove index ' + index);
 
             for (var _key in this.transactions) {
                 if (this.transactions.hasOwnProperty(_key) && /^0$|^[1-9]\d*$/.test(_key) && _key <= 4294967294) {
@@ -54227,13 +55214,15 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         return {
             transactionType: null,
             group_title: "",
-            transactions: []
+            transactions: [],
+            group_title_errors: [],
+            invalid_submission: ""
         };
     }
 });
 
 /***/ }),
-/* 128 */
+/* 143 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -54255,51 +55244,51 @@ var render = function() {
     [
       _c("input", { attrs: { name: "_token", type: "hidden", value: "xxx" } }),
       _vm._v(" "),
+      _vm.invalid_submission !== ""
+        ? _c("div", { staticClass: "row" }, [
+            _c("div", { staticClass: "col-lg-12" }, [
+              _c(
+                "div",
+                {
+                  staticClass: "alert alert-danger alert-dismissible",
+                  attrs: { role: "alert" }
+                },
+                [
+                  _vm._m(0),
+                  _vm._v(" "),
+                  _c("strong", [_vm._v("Error!")]),
+                  _vm._v(
+                    " " + _vm._s(_vm.invalid_submission) + "\n            "
+                  )
+                ]
+              )
+            ])
+          ])
+        : _vm._e(),
+      _vm._v(" "),
       _vm.transactions.length > 1
         ? _c("div", { staticClass: "row" }, [
             _c("div", { staticClass: "col-lg-6" }, [
               _c("div", { staticClass: "box" }, [
-                _vm._m(0),
+                _vm._m(1),
                 _vm._v(" "),
-                _c("div", { staticClass: "box-body" }, [
-                  _c("div", { staticClass: "form-group" }, [
-                    _c("div", { staticClass: "col-sm-12" }, [
-                      _c("input", {
-                        directives: [
-                          {
-                            name: "model",
-                            rawName: "v-model",
-                            value: _vm.group_title,
-                            expression: "group_title"
-                          }
-                        ],
-                        staticClass: "form-control",
-                        attrs: {
-                          type: "text",
-                          name: "group_title",
-                          title: "Description of the split transaction",
-                          autocomplete: "off",
-                          placeholder: "Description of the split transaction"
+                _c(
+                  "div",
+                  { staticClass: "box-body" },
+                  [
+                    _c("group-description", {
+                      attrs: { error: _vm.group_title_errors },
+                      model: {
+                        value: _vm.group_title,
+                        callback: function($$v) {
+                          _vm.group_title = $$v
                         },
-                        domProps: { value: _vm.group_title },
-                        on: {
-                          input: function($event) {
-                            if ($event.target.composing) {
-                              return
-                            }
-                            _vm.group_title = $event.target.value
-                          }
-                        }
-                      }),
-                      _vm._v(" "),
-                      _c("p", { staticClass: "help-block" }, [
-                        _vm._v(
-                          "\n                                If you create a split transaction, there must be a global description for all splits\n                                of the transaction.\n                            "
-                        )
-                      ])
-                    ])
-                  ])
-                ])
+                        expression: "group_title"
+                      }
+                    })
+                  ],
+                  1
+                )
               ])
             ])
           ])
@@ -54367,7 +55356,8 @@ var render = function() {
                             accountTypeFilters:
                               transaction.source_account.allowed_types,
                             transactionType: _vm.transactionType,
-                            index: index
+                            index: index,
+                            error: transaction.errors.source_account
                           },
                           on: {
                             "clear:value": function($event) {
@@ -54387,7 +55377,8 @@ var render = function() {
                             accountTypeFilters:
                               transaction.destination_account.allowed_types,
                             transactionType: _vm.transactionType,
-                            index: index
+                            index: index,
+                            error: transaction.errors.destination_account
                           },
                           on: {
                             "clear:value": function($event) {
@@ -54399,79 +55390,33 @@ var render = function() {
                           }
                         }),
                         _vm._v(" "),
-                        _c("div", { staticClass: "form-group" }, [
-                          _c("div", { staticClass: "col-sm-12" }, [
-                            _c("input", {
-                              directives: [
-                                {
-                                  name: "model",
-                                  rawName: "v-model",
-                                  value: transaction.description,
-                                  expression: "transaction.description"
-                                }
-                              ],
-                              staticClass: "form-control",
-                              attrs: {
-                                type: "text",
-                                name: "description[]",
-                                title: "Description",
-                                autocomplete: "off",
-                                placeholder: "Description"
-                              },
-                              domProps: { value: transaction.description },
-                              on: {
-                                input: function($event) {
-                                  if ($event.target.composing) {
-                                    return
-                                  }
-                                  _vm.$set(
-                                    transaction,
-                                    "description",
-                                    $event.target.value
-                                  )
-                                }
-                              }
-                            })
-                          ])
-                        ]),
+                        _c("transaction-description", {
+                          attrs: {
+                            index: index,
+                            error: transaction.errors.description
+                          },
+                          model: {
+                            value: transaction.description,
+                            callback: function($$v) {
+                              _vm.$set(transaction, "description", $$v)
+                            },
+                            expression: "transaction.description"
+                          }
+                        }),
                         _vm._v(" "),
-                        _c("div", { staticClass: "form-group" }, [
-                          _c("div", { staticClass: "col-sm-12" }, [
-                            _c("input", {
-                              directives: [
-                                {
-                                  name: "model",
-                                  rawName: "v-model",
-                                  value: transaction.date,
-                                  expression: "transaction.date"
-                                }
-                              ],
-                              staticClass: "form-control",
-                              attrs: {
-                                type: "date",
-                                name: "date[]",
-                                title: "Date",
-                                value: "",
-                                autocomplete: "off",
-                                disabled: index > 0,
-                                placeholder: "Date"
-                              },
-                              domProps: { value: transaction.date },
-                              on: {
-                                input: function($event) {
-                                  if ($event.target.composing) {
-                                    return
-                                  }
-                                  _vm.$set(
-                                    transaction,
-                                    "date",
-                                    $event.target.value
-                                  )
-                                }
-                              }
-                            })
-                          ])
-                        ]),
+                        _c("standard-date", {
+                          attrs: {
+                            index: index,
+                            error: transaction.errors.date
+                          },
+                          model: {
+                            value: transaction.date,
+                            callback: function($$v) {
+                              _vm.$set(transaction, "date", $$v)
+                            },
+                            expression: "transaction.date"
+                          }
+                        }),
                         _vm._v(" "),
                         index === 0
                           ? _c(
@@ -54513,6 +55458,7 @@ var render = function() {
                           attrs: {
                             source: transaction.source_account,
                             destination: transaction.destination_account,
+                            error: transaction.errors.amount,
                             transactionType: _vm.transactionType
                           },
                           model: {
@@ -54528,7 +55474,8 @@ var render = function() {
                           attrs: {
                             source: transaction.source_account,
                             destination: transaction.destination_account,
-                            transactionType: _vm.transactionType
+                            transactionType: _vm.transactionType,
+                            error: transaction.errors.foreign_amount
                           },
                           model: {
                             value: transaction.foreign_amount,
@@ -54547,7 +55494,10 @@ var render = function() {
                       { staticClass: "col-lg-4" },
                       [
                         _c("budget", {
-                          attrs: { transactionType: _vm.transactionType },
+                          attrs: {
+                            transactionType: _vm.transactionType,
+                            error: transaction.errors.budget_id
+                          },
                           model: {
                             value: transaction.budget,
                             callback: function($$v) {
@@ -54558,7 +55508,10 @@ var render = function() {
                         }),
                         _vm._v(" "),
                         _c("category", {
-                          attrs: { transactionType: _vm.transactionType },
+                          attrs: {
+                            transactionType: _vm.transactionType,
+                            error: transaction.errors.category
+                          },
                           model: {
                             value: transaction.category,
                             callback: function($$v) {
@@ -54569,7 +55522,10 @@ var render = function() {
                         }),
                         _vm._v(" "),
                         _c("piggy-bank", {
-                          attrs: { transactionType: _vm.transactionType },
+                          attrs: {
+                            transactionType: _vm.transactionType,
+                            error: transaction.errors.piggy_bank
+                          },
                           model: {
                             value: transaction.piggy_bank,
                             callback: function($$v) {
@@ -54580,6 +55536,7 @@ var render = function() {
                         }),
                         _vm._v(" "),
                         _c("tags", {
+                          attrs: { error: transaction.errors.tags },
                           model: {
                             value: transaction.tags,
                             callback: function($$v) {
@@ -54590,6 +55547,7 @@ var render = function() {
                         }),
                         _vm._v(" "),
                         _c("custom-transaction-fields", {
+                          attrs: { error: transaction.errors.custom_errors },
                           model: {
                             value: transaction.custom_fields,
                             callback: function($$v) {
@@ -54636,6 +55594,23 @@ var render = function() {
   )
 }
 var staticRenderFns = [
+  function() {
+    var _vm = this
+    var _h = _vm.$createElement
+    var _c = _vm._self._c || _h
+    return _c(
+      "button",
+      {
+        staticClass: "close",
+        attrs: {
+          type: "button",
+          "data-dismiss": "alert",
+          "aria-label": "Close"
+        }
+      },
+      [_c("span", { attrs: { "aria-hidden": "true" } }, [_vm._v("×")])]
+    )
+  },
   function() {
     var _vm = this
     var _h = _vm.$createElement
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 182264449d..351df57b96 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -16,7 +16,9 @@ Vue.component('custom-date', require('./components/transactions/CustomDate.vue')
 Vue.component('custom-string', require('./components/transactions/CustomString.vue'));
 Vue.component('custom-attachments', require('./components/transactions/CustomAttachments.vue'));
 Vue.component('custom-textarea', require('./components/transactions/CustomTextArea.vue'));
-
+Vue.component('standard-date', require('./components/transactions/StandardDate.vue'));
+Vue.component('group-description', require('./components/transactions/GroupDescription'));
+Vue.component('transaction-description', require('./components/transactions/TransactionDescription'));
 
 Vue.component('custom-transaction-fields', require('./components/transactions/CustomTransactionFields.vue'));
 Vue.component('piggy-bank', require('./components/transactions/PiggyBank.vue'));
diff --git a/resources/assets/js/components/transactions/AccountSelect.vue b/resources/assets/js/components/transactions/AccountSelect.vue
index 3bf2dcc401..c57642fa56 100644
--- a/resources/assets/js/components/transactions/AccountSelect.vue
+++ b/resources/assets/js/components/transactions/AccountSelect.vue
@@ -18,7 +18,7 @@
   - along with Firefly III. If not, see <http://www.gnu.org/licenses/>.
   -->
 <template>
-    <div class="form-group">
+    <div class="form-group" v-bind:class="{ 'has-error': hasError()}">
         <div class="col-sm-12">
             <div class="input-group">
                 <input
@@ -50,6 +50,9 @@
                     :target="target"
                     item-key="name"
             ></typeahead>
+            <ul class="list-unstyled" v-for="error in this.error">
+                <li class="text-danger">{{ error }}</li>
+            </ul>
         </div>
     </div>
 
@@ -61,6 +64,7 @@
             title: String,
             index: Number,
             transactionType: String,
+            error: Array,
             accountName: {
                 type: String,
                 default: ''
@@ -106,6 +110,9 @@
         },
         methods:
             {
+                hasError: function () {
+                    return this.error.length > 0;
+                },
                 triggerTransactionType: function () {
                     if (null === this.transactionType) {
                         return;
diff --git a/resources/assets/js/components/transactions/Amount.vue b/resources/assets/js/components/transactions/Amount.vue
index 4ec6a5ec5d..017d6fd181 100644
--- a/resources/assets/js/components/transactions/Amount.vue
+++ b/resources/assets/js/components/transactions/Amount.vue
@@ -19,12 +19,16 @@
   -->
 
 <template>
-    <div class="form-group">
+    <div class="form-group" v-bind:class="{ 'has-error': hasError()}">
         <label class="col-sm-4 control-label" ref="cur"></label>
         <div class="col-sm-8">
-            <input type="number" ref="amount" :value="value" @input="handleInput" step="any" class="form-control"
+            <input type="number" ref="amount" :value="value" @input="handleInput" step="any"
+                   class="form-control"
                    name="amount[]"
                    title="amount" autocomplete="off" placeholder="Amount">
+            <ul class="list-unstyled" v-for="error in this.error">
+                <li class="text-danger">{{ error }}</li>
+            </ul>
         </div>
     </div>
 </template>
@@ -32,7 +36,7 @@
 <script>
     export default {
         name: "Amount",
-        props: ['source', 'destination', 'transactionType','value'],
+        props: ['source', 'destination', 'transactionType', 'value', 'error'],
         data() {
             return {
                 sourceAccount: this.source,
@@ -44,6 +48,9 @@
             handleInput(e) {
                 this.$emit('input', this.$refs.amount.value);
             },
+            hasError: function () {
+                return this.error.length > 0;
+            },
             changeData: function () {
                 if ('' === this.transactionType) {
                     $(this.$refs.cur).text(this.sourceAccount.currency_name);
diff --git a/resources/assets/js/components/transactions/Budget.vue b/resources/assets/js/components/transactions/Budget.vue
index ce82f87b84..8805b8a42e 100644
--- a/resources/assets/js/components/transactions/Budget.vue
+++ b/resources/assets/js/components/transactions/Budget.vue
@@ -19,11 +19,17 @@
   -->
 
 <template>
-    <div class="form-group" v-if="typeof this.transactionType !== 'undefined' && this.transactionType === 'Withdrawal'">
+    <div class="form-group"
+         v-bind:class="{ 'has-error': hasError()}"
+         v-if="typeof this.transactionType !== 'undefined' && this.transactionType === 'Withdrawal'">
         <div class="col-sm-12">
-            <select name="budget[]" ref="budget" @input="handleInput" class="form-control" v-if="this.budgets.length > 0">
+            <select name="budget[]" ref="budget" @input="handleInput" class="form-control"
+                    v-if="this.budgets.length > 0">
                 <option v-for="budget in this.budgets" :label="budget.name" :value="budget.id">{{budget.name}}</option>
             </select>
+            <ul class="list-unstyled" v-for="error in this.error">
+                <li class="text-danger">{{ error }}</li>
+            </ul>
         </div>
     </div>
 </template>
@@ -31,7 +37,7 @@
 <script>
     export default {
         name: "Budget",
-        props: ['transactionType','value'],
+        props: ['transactionType', 'value', 'error'],
         mounted() {
             this.loadBudgets();
         },
@@ -44,6 +50,9 @@
             handleInput(e) {
                 this.$emit('input', this.$refs.budget.value);
             },
+            hasError: function () {
+                return this.error.length > 0;
+            },
             loadBudgets: function () {
                 let URI = document.getElementsByTagName('base')[0].href + "json/budgets";
                 axios.get(URI, {}).then((res) => {
diff --git a/resources/assets/js/components/transactions/Category.vue b/resources/assets/js/components/transactions/Category.vue
index 0d4b10c1c7..ac34ba6777 100644
--- a/resources/assets/js/components/transactions/Category.vue
+++ b/resources/assets/js/components/transactions/Category.vue
@@ -19,7 +19,7 @@
   -->
 
 <template>
-    <div class="form-group">
+    <div class="form-group" v-bind:class="{ 'has-error': hasError()}">
         <div class="col-sm-12">
             <div class="input-group">
                 <input
@@ -51,6 +51,9 @@
                     :target="target"
                     item-key="name"
             ></typeahead>
+            <ul class="list-unstyled" v-for="error in this.error">
+                <li class="text-danger">{{ error }}</li>
+            </ul>
         </div>
     </div>
 </template>
@@ -61,6 +64,7 @@
         props: {
             value: String,
             inputName: String,
+            error: Array,
             accountName: {
                 type: String,
                 default: ''
@@ -81,6 +85,9 @@
             this.categoryAutoCompleteURI = document.getElementsByTagName('base')[0].href + "json/categories?query=";
         },
         methods: {
+            hasError: function () {
+                return this.error.length > 0;
+            },
             handleInput(e) {
                 if (typeof this.$refs.input.value === 'string') {
                     this.$emit('input', this.$refs.input.value);
diff --git a/resources/assets/js/components/transactions/CreateTransaction.vue b/resources/assets/js/components/transactions/CreateTransaction.vue
index 231d5f2720..a50b01fa7d 100644
--- a/resources/assets/js/components/transactions/CreateTransaction.vue
+++ b/resources/assets/js/components/transactions/CreateTransaction.vue
@@ -23,6 +23,16 @@
           enctype="multipart/form-data">
         <input name="_token" type="hidden" value="xxx">
 
+        <div class="row" v-if="invalid_submission !== ''">
+            <div class="col-lg-12">
+                <div class="alert alert-danger alert-dismissible" role="alert">
+                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
+                            aria-hidden="true">&times;</span></button>
+                    <strong>Error!</strong> {{ invalid_submission }}
+                </div>
+            </div>
+        </div>
+
         <div class="row" v-if="transactions.length > 1">
             <div class="col-lg-6">
                 <div class="box">
@@ -32,18 +42,10 @@
                         </h3>
                     </div>
                     <div class="box-body">
-                        <div class="form-group">
-                            <div class="col-sm-12">
-                                <input type="text" class="form-control" name="group_title"
-                                       v-model="group_title"
-                                       title="Description of the split transaction" autocomplete="off"
-                                       placeholder="Description of the split transaction">
-                                <p class="help-block">
-                                    If you create a split transaction, there must be a global description for all splits
-                                    of the transaction.
-                                </p>
-                            </div>
-                        </div>
+                        <group-description
+                                :error="group_title_errors"
+                                v-model="group_title"
+                        ></group-description>
                     </div>
                 </div>
             </div>
@@ -75,6 +77,7 @@
                                             :index="index"
                                             v-on:clear:value="clearSource(index)"
                                             v-on:select:account="selectedSourceAccount(index, $event)"
+                                            :error="transaction.errors.source_account"
                                     ></account-select>
                                     <account-select
                                             inputName="destination[]"
@@ -85,23 +88,20 @@
                                             :index="index"
                                             v-on:clear:value="clearDestination(index)"
                                             v-on:select:account="selectedDestinationAccount(index, $event)"
+                                            :error="transaction.errors.destination_account"
                                     ></account-select>
-                                    <div class="form-group">
-                                        <div class="col-sm-12">
-                                            <input type="text" class="form-control" name="description[]"
-                                                   v-model="transaction.description"
-                                                   title="Description" autocomplete="off" placeholder="Description">
-                                        </div>
-                                    </div>
-                                    <div class="form-group">
-                                        <div class="col-sm-12">
-                                            <input type="date" class="form-control" name="date[]"
-                                                   title="Date" value="" autocomplete="off"
-                                                   v-model="transaction.date"
-                                                   :disabled="index > 0"
-                                                   placeholder="Date">
-                                        </div>
-                                    </div>
+                                    <transaction-description
+                                            v-model="transaction.description"
+                                            :index="index"
+                                            :error="transaction.errors.description"
+                                    >
+                                    </transaction-description>
+                                    <standard-date
+                                            v-model="transaction.date"
+                                            :index="index"
+                                            :error="transaction.errors.date"
+                                    >
+                                    </standard-date>
                                     <div v-if="index===0">
                                         <transaction-type
                                                 :source="transaction.source_account.type"
@@ -117,6 +117,7 @@
                                             :source="transaction.source_account"
                                             :destination="transaction.destination_account"
                                             v-model="transaction.amount"
+                                            :error="transaction.errors.amount"
                                             :transactionType="transactionType"
                                     ></amount>
                                     <foreign-amount
@@ -124,26 +125,33 @@
                                             :destination="transaction.destination_account"
                                             v-model="transaction.foreign_amount"
                                             :transactionType="transactionType"
+                                            :error="transaction.errors.foreign_amount"
                                     ></foreign-amount>
                                 </div>
                                 <div class="col-lg-4">
                                     <budget
                                             :transactionType="transactionType"
                                             v-model="transaction.budget"
+                                            :error="transaction.errors.budget_id"
                                     ></budget>
                                     <category
                                             :transactionType="transactionType"
                                             v-model="transaction.category"
+                                            :error="transaction.errors.category"
                                     ></category>
                                     <piggy-bank
                                             :transactionType="transactionType"
                                             v-model="transaction.piggy_bank"
+                                            :error="transaction.errors.piggy_bank"
                                     ></piggy-bank>
                                     <tags
                                             v-model="transaction.tags"
+                                            :error="transaction.errors.tags"
                                     ></tags>
                                     <custom-transaction-fields
-                                            v-model="transaction.custom_fields"></custom-transaction-fields>
+                                            v-model="transaction.custom_fields"
+                                            :error="transaction.errors.custom_errors"
+                                    ></custom-transaction-fields>
                                 </div>
                             </div>
                         </div>
@@ -165,9 +173,11 @@
 </template>
 
 <script>
+    import GroupDescription from "./GroupDescription";
+
     export default {
         name: "CreateTransaction",
-        components: {},
+        components: {GroupDescription},
         mounted() {
             this.addTransaction();
         },
@@ -183,6 +193,10 @@
                 let transactionType;
                 let firstSource;
                 let firstDestination;
+                let foreignAmount = null;
+                let foreignCurrency = null;
+                let currentArray;
+
                 if (this.transactions.length > 1) {
                     data.group_title = this.group_title;
                 }
@@ -209,7 +223,8 @@
                 for (let key in this.transactions) {
                     if (this.transactions.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
                         tagList = [];
-
+                        foreignAmount = null;
+                        foreignCurrency = null;
                         // loop tags
                         for (let tagKey in this.transactions[key].tags) {
                             if (this.transactions[key].tags.hasOwnProperty(tagKey) && /^0$|^[1-9]\d*$/.test(tagKey) && key <= 4294967294) {
@@ -217,8 +232,13 @@
                             }
                         }
 
+                        // set foreign currency info:
+                        if (this.transactions[key].foreign_amount.amount !== '' && parseFloat(this.transactions[key].foreign_amount.amount) !== .00) {
+                            foreignAmount = this.transactions[key].foreign_amount.amount;
+                            foreignCurrency = this.transactions[key].foreign_amount.currency_id;
+                        }
 
-                        data.transactions.push(
+                        currentArray =
                             {
                                 type: transactionType,
                                 date: this.transactions[key].date,
@@ -226,9 +246,6 @@
                                 amount: this.transactions[key].amount,
                                 currency_id: this.transactions[key].currency_id,
 
-                                foreign_amount: this.transactions[key].foreign_amount.amount,
-                                foreign_currency_id: this.transactions[key].foreign_amount.currency_id,
-
                                 description: this.transactions[key].description,
 
                                 source_id: this.transactions[key].source_account.id,
@@ -237,10 +254,11 @@
                                 destination_id: this.transactions[key].destination_account.id,
                                 destination_name: this.transactions[key].destination_account.name,
 
-                                budget_id: this.transactions[key].budget,
+
                                 category_name: this.transactions[key].category,
-                                piggy_bank_id: this.transactions[key].piggy_bank,
-                                tags: tagList,
+                                //budget_id: this.transactions[key].budget,
+                                //piggy_bank_id: this.transactions[key].piggy_bank,
+
 
                                 interest_date: this.transactions[key].custom_fields.interest_date,
                                 book_date: this.transactions[key].custom_fields.book_date,
@@ -250,8 +268,24 @@
                                 invoice_date: this.transactions[key].custom_fields.invoice_date,
                                 internal_reference: this.transactions[key].custom_fields.internal_reference,
                                 notes: this.transactions[key].custom_fields.notes
-                            }
-                        );
+                            };
+
+                        if (tagList.length > 0) {
+                            currentArray.tags = tagList;
+                        }
+                        if (null !== foreignAmount) {
+                            currentArray.foreign_amount = foreignAmount;
+                            currentArray.foreign_currency_id = foreignCurrency;
+                        }
+                        // set budget id and piggy ID.
+                        if(parseInt(this.transactions[key].budget) > 0) {
+                            currentArray.budget_id = parseInt(this.transactions[key].budget);
+                        }
+                        if(parseInt(this.transactions[key].piggy_bank) > 0) {
+                            currentArray.piggy_bank_id = parseInt(this.transactions[key].piggy_bank);
+                        }
+
+                        data.transactions.push(currentArray);
                     }
                 }
                 //console.log(data);
@@ -264,21 +298,96 @@
 
                 axios.post(uri, data)
                     .then(response => {
-                        console.log('OK!');
-                        //console.log(response);
+                        window.location.href = 'transactions/show/'+ response.data.data.id + '?message=OK';
                     }).catch(error => {
-                        // give user errors things back.
-                        console.log('error!');
+                    // give user errors things back.
+                    // something something render errors.
 
-                        // something something render errors.
-
-                        console.log(error.response.data);
-                        // something.
+                    console.log(error.response.data);
+                    this.parseErrors(error.response.data);
+                    // something.
                 });
                 if (e) {
                     e.preventDefault();
                 }
             },
+            setDefaultErrors: function () {
+                for (const key in this.transactions) {
+                    if (this.transactions.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
+                        this.transactions[key].errors = {
+                            source_account: [],
+                            destination_account: [],
+                            description: [],
+                            amount: [],
+                            date: [],
+                            budget_id: [],
+                            foreign_amount: [],
+                            category: [],
+                            piggy_bank: [],
+                            tags: [],
+                            // custom fields:
+                            custom_errors: {
+                                interest_date: [],
+                                book_date: [],
+                                process_date: [],
+                                due_date: [],
+                                payment_date: [],
+                                invoice_date: [],
+                                internal_reference: [],
+                                notes: [],
+                                attachments: [],
+                            },
+                        };
+                    }
+                }
+            },
+            parseErrors: function (errors) {
+                this.setDefaultErrors();
+                this.invalid_submission = "";
+                if (errors.message.length > 0) {
+                    this.invalid_submission = "There was something wrong with your submission. Please check out the errors below.";
+                }
+                let transactionIndex;
+                let fieldName;
+
+                for (const key in errors.errors) {
+                    if (errors.errors.hasOwnProperty(key)) {
+                        if (key === 'group_title') {
+                            this.group_title_errors = errors.errors[key];
+                        }
+                        if (key !== 'group_title') {
+                            // lol dumbest way to explode "transactions.0.something" ever.
+                            transactionIndex = parseInt(key.split('.')[1]);
+                            fieldName = key.split('.')[2];
+                            // set error in this object thing.
+                            switch (fieldName) {
+                                case 'amount':
+                                case 'date':
+                                case 'budget_id':
+                                case 'description':
+                                case 'tags':
+                                    this.transactions[transactionIndex].errors[fieldName] = errors.errors[key];
+                                    break;
+                                case 'source_name':
+                                case 'source_id':
+                                    this.transactions[transactionIndex].errors.source_account =
+                                        this.transactions[transactionIndex].errors.source_account.concat(errors.errors[key]);
+                                    break;
+                                case 'destination_name':
+                                case 'destination_id':
+                                    this.transactions[transactionIndex].errors.destination_account =
+                                        this.transactions[transactionIndex].errors.destination_account.concat(errors.errors[key]);
+                                    break;
+                                case 'foreign_amount':
+                                case 'foreign_currency_id':
+                                    this.transactions[transactionIndex].errors.foreign_amount =
+                                        this.transactions[transactionIndex].errors.foreign_amount.concat(errors.errors[key]);
+                                    break;
+                            }
+                        }
+                    }
+                }
+            },
             addTransaction: function (e) {
                 this.transactions.push({
                     description: "",
@@ -286,6 +395,30 @@
                     amount: "",
                     category: "",
                     piggy_bank: 0,
+                    errors: {
+                        source_account: [],
+                        destination_account: [],
+                        description: [],
+                        amount: [],
+                        date: [],
+                        budget_id: [],
+                        foreign_amount: [],
+                        category: [],
+                        piggy_bank: [],
+                        tags: [],
+                        // custom fields:
+                        custom_errors: {
+                            interest_date: [],
+                            book_date: [],
+                            process_date: [],
+                            due_date: [],
+                            payment_date: [],
+                            invoice_date: [],
+                            internal_reference: [],
+                            notes: [],
+                            attachments: [],
+                        },
+                    },
                     budget: 0,
                     tags: [],
                     custom_fields: {
@@ -349,7 +482,6 @@
                 }
 
                 this.transactions.splice(index, 1);
-                console.log('Going to remove index ' + index);
 
                 for (const key in this.transactions) {
                     if (
@@ -445,7 +577,9 @@
             return {
                 transactionType: null,
                 group_title: "",
-                transactions: []
+                transactions: [],
+                group_title_errors: [],
+                invalid_submission: ""
             };
         },
     }
diff --git a/resources/assets/js/components/transactions/CustomAttachments.vue b/resources/assets/js/components/transactions/CustomAttachments.vue
index bafcc59880..543b9889c1 100644
--- a/resources/assets/js/components/transactions/CustomAttachments.vue
+++ b/resources/assets/js/components/transactions/CustomAttachments.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="form-group">
+    <div class="form-group"
+         v-bind:class="{ 'has-error': hasError()}"
+    >
         <div class="col-sm-12 text-sm">
             {{ title }}
         </div>
@@ -9,6 +11,9 @@
                    :placeholder="title"
                    :title="title"
                    :name="name" type="file" class="form-control">
+            <ul class="list-unstyled" v-for="error in this.error">
+                <li class="text-danger">{{ error }}</li>
+            </ul>
         </div>
     </div>
 </template>
@@ -18,8 +23,14 @@
         name: "CustomAttachments",
         props: {
             title: String,
-            name: String
+            name: String,
+            error: Array
         },
+        methods: {
+            hasError: function () {
+                return this.error.length > 0;
+            },
+        }
     }
 </script>
 
diff --git a/resources/assets/js/components/transactions/CustomDate.vue b/resources/assets/js/components/transactions/CustomDate.vue
index c7359d775f..5ee4355f75 100644
--- a/resources/assets/js/components/transactions/CustomDate.vue
+++ b/resources/assets/js/components/transactions/CustomDate.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="form-group">
+    <div class="form-group"
+         v-bind:class="{ 'has-error': hasError()}"
+    >
         <div class="col-sm-12 text-sm">
             {{ title }}
         </div>
@@ -9,6 +11,9 @@
                    ref="date"
                    :value="value" @input="handleInput"
                    :placeholder="title">
+            <ul class="list-unstyled" v-for="error in this.error">
+                <li class="text-danger">{{ error }}</li>
+            </ul>
         </div>
     </div>
 </template>
@@ -19,12 +24,16 @@
         props: {
             value: String,
             title: String,
-            name: String
+            name: String,
+            error: Array,
         },
         methods: {
             handleInput(e) {
                 this.$emit('input', this.$refs.date.value);
-            }
+            },
+            hasError: function () {
+                return this.error.length > 0;
+            },
         }
     }
 </script>
diff --git a/resources/assets/js/components/transactions/CustomString.vue b/resources/assets/js/components/transactions/CustomString.vue
index 4ff5a1e7c2..b0c4b1d3c0 100644
--- a/resources/assets/js/components/transactions/CustomString.vue
+++ b/resources/assets/js/components/transactions/CustomString.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="form-group">
+    <div class="form-group"
+         v-bind:class="{ 'has-error': hasError()}"
+    >
         <div class="col-sm-12 text-sm">
             {{ title }}
         </div>
@@ -9,6 +11,9 @@
                    ref="str"
                    :value="value" @input="handleInput"
                    :placeholder="title">
+            <ul class="list-unstyled" v-for="error in this.error">
+                <li class="text-danger">{{ error }}</li>
+            </ul>
         </div>
     </div>
 </template>
@@ -19,11 +24,15 @@
         props: {
             title: String,
             name: String,
-            value: String
+            value: String,
+            error: Array
         },
         methods: {
             handleInput(e) {
                 this.$emit('input', this.$refs.str.value);
+            },
+            hasError: function () {
+                return this.error.length > 0;
             }
         }
     }
diff --git a/resources/assets/js/components/transactions/CustomTextarea.vue b/resources/assets/js/components/transactions/CustomTextarea.vue
index 2f18ce52ce..1bbeba9241 100644
--- a/resources/assets/js/components/transactions/CustomTextarea.vue
+++ b/resources/assets/js/components/transactions/CustomTextarea.vue
@@ -1,14 +1,19 @@
 <template>
-    <div class="form-group">
+    <div class="form-group"
+         v-bind:class="{ 'has-error': hasError()}"
+    >
         <div class="col-sm-12 text-sm">
             {{ title }}
         </div>
         <div class="col-sm-12">
-            <textarea class="form-control"  :name="name"
+            <textarea class="form-control" :name="name"
                       :title="title" autocomplete="off"
                       ref="str"
                       :value="value" @input="handleInput"
-                      :placeholder="title" ></textarea>
+                      :placeholder="title"></textarea>
+            <ul class="list-unstyled" v-for="error in this.error">
+                <li class="text-danger">{{ error }}</li>
+            </ul>
         </div>
     </div>
 </template>
@@ -19,11 +24,15 @@
         props: {
             title: String,
             name: String,
-            value: String
+            value: String,
+            error: Array
         },
         methods: {
             handleInput(e) {
                 this.$emit('input', this.$refs.str.value);
+            },
+            hasError: function () {
+                return this.error.length > 0;
             }
         }
     }
diff --git a/resources/assets/js/components/transactions/CustomTransactionFields.vue b/resources/assets/js/components/transactions/CustomTransactionFields.vue
index 9da3751f68..301452896d 100644
--- a/resources/assets/js/components/transactions/CustomTransactionFields.vue
+++ b/resources/assets/js/components/transactions/CustomTransactionFields.vue
@@ -20,18 +20,34 @@
 
 <template>
     <div>
-        <component v-model="value.interest_date" v-if="this.fields.interest_date" name="interest_date[]" title="Interest date" v-bind:is="dateComponent"></component>
-        <component v-model="value.book_date" v-if="this.fields.book_date" name="book_date[]" title="Book date" v-bind:is="dateComponent"></component>
-        <component v-model="value.process_date" v-if="this.fields.process_date" name="process_date[]" title="Process date" v-bind:is="dateComponent"></component>
-        <component v-model="value.due_date" v-if="this.fields.due_date" name="due_date[]" title="Due date" v-bind:is="dateComponent"></component>
-        <component v-model="value.payment_date" v-if="this.fields.payment_date" name="payment_date[]" title="Payment date" v-bind:is="dateComponent"></component>
+        <component
+                :error="error.interest_date"
+                v-model="value.interest_date" v-if="this.fields.interest_date" name="interest_date[]" title="Interest date" v-bind:is="dateComponent"></component>
+        <component
+                :error="error.book_date"
+                v-model="value.book_date" v-if="this.fields.book_date" name="book_date[]" title="Book date" v-bind:is="dateComponent"></component>
+        <component
+                :error="error.process_date"
+                v-model="value.process_date" v-if="this.fields.process_date" name="process_date[]" title="Process date" v-bind:is="dateComponent"></component>
+        <component
+                :error="error.due_date"
+                v-model="value.due_date" v-if="this.fields.due_date" name="due_date[]" title="Due date" v-bind:is="dateComponent"></component>
+        <component
+                :error="error.payment_date"
+                v-model="value.payment_date" v-if="this.fields.payment_date" name="payment_date[]" title="Payment date" v-bind:is="dateComponent"></component>
         <component v-model="value.invoice_date" v-if="this.fields.invoice_date" name="invoice_date[]" title="Invoice date" v-bind:is="dateComponent"></component>
 
-        <component v-model="value.internal_reference" v-if="this.fields.internal_reference" name="internal_reference[]" title="Internal reference" v-bind:is="stringComponent"></component>
+        <component
+                :error="error.internal_reference"
+                v-model="value.internal_reference" v-if="this.fields.internal_reference" name="internal_reference[]" title="Internal reference" v-bind:is="stringComponent"></component>
 
-        <component v-model="value.attachments" v-if="this.fields.attachments" name="attachments[]" title="Attachments" v-bind:is="attachmentComponent"></component>
+        <component
+                :error="error.attachments"
+                v-model="value.attachments" v-if="this.fields.attachments" name="attachments[]" title="Attachments" v-bind:is="attachmentComponent"></component>
 
-        <component v-model="value.notes" v-if="this.fields.notes" name="notes[]" title="Notes" v-bind:is="textareaComponent"></component>
+        <component
+                :error="error.notes"
+                v-model="value.notes" v-if="this.fields.notes" name="notes[]" title="Notes" v-bind:is="textareaComponent"></component>
 
 
     </div>
@@ -40,7 +56,7 @@
 <script>
     export default {
         name: "CustomTransactionFields",
-        props: ['value'],
+        props: ['value','error'],
         mounted() {
             this.getPreference();
         },
diff --git a/resources/assets/js/components/transactions/ForeignAmountSelect.vue b/resources/assets/js/components/transactions/ForeignAmountSelect.vue
index 15e6d7f79a..d2d9cbff82 100644
--- a/resources/assets/js/components/transactions/ForeignAmountSelect.vue
+++ b/resources/assets/js/components/transactions/ForeignAmountSelect.vue
@@ -19,7 +19,7 @@
   -->
 
 <template>
-    <div class="form-group">
+    <div class="form-group" v-bind:class="{ 'has-error': hasError()}">
         <div class="col-sm-4">
             <select class="form-control" ref="currency_select" name="foreign_currency[]"
                     v-if="this.enabledCurrencies.length > 0" @input="handleInput">
@@ -38,6 +38,10 @@
             <input type="number" @input="handleInput" ref="amount" :value="value.amount" step="any" class="form-control"
                    name="foreign_amount[]" v-if="this.enabledCurrencies.length > 0"
                    title="Foreign amount" autocomplete="off" placeholder="Foreign amount">
+
+            <ul class="list-unstyled" v-for="error in this.error">
+                <li class="text-danger">{{ error }}</li>
+            </ul>
         </div>
     </div>
 </template>
@@ -45,7 +49,7 @@
 <script>
     export default {
         name: "ForeignAmountSelect",
-        props: ['source', 'destination', 'transactionType', 'value'],
+        props: ['source', 'destination', 'transactionType', 'value','error'],
         mounted() {
             this.loadCurrencies();
         },
@@ -68,6 +72,9 @@
             }
         },
         methods: {
+            hasError: function () {
+                return this.error.length > 0;
+            },
             handleInput(e) {
                 this.$emit('input', {
                     amount: +this.$refs.amount.value,
diff --git a/resources/assets/js/components/transactions/GroupDescription.vue b/resources/assets/js/components/transactions/GroupDescription.vue
new file mode 100644
index 0000000000..7e9768c924
--- /dev/null
+++ b/resources/assets/js/components/transactions/GroupDescription.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="form-group" v-bind:class="{ 'has-error': hasError()}">
+        <div class="col-sm-12">
+            <input
+                    type="text"
+                    class="form-control"
+                    name="group_title"
+                    title="Description of the split transaction"
+                    ref="descr"
+                    autocomplete="off"
+                    placeholder="Description of the split transaction"
+                    :value="value" @input="handleInput"
+            >
+            <p class="help-block" v-if="error.length === 0">
+                If you create a split transaction, there must be a global description for all splits
+                of the transaction.
+            </p>
+            <ul class="list-unstyled" v-for="error in this.error">
+                <li class="text-danger">{{ error }}</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['error', 'value', 'index'],
+        name: "GroupDescription",
+        methods: {
+            hasError: function () {
+                return this.error.length > 0;
+            },
+            handleInput(e) {
+                this.$emit('input', this.$refs.descr.value);
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/components/transactions/PiggyBank.vue b/resources/assets/js/components/transactions/PiggyBank.vue
index 92fc2fcc30..3f0fabdd02 100644
--- a/resources/assets/js/components/transactions/PiggyBank.vue
+++ b/resources/assets/js/components/transactions/PiggyBank.vue
@@ -19,11 +19,16 @@
   -->
 
 <template>
-    <div class="form-group" v-if="typeof this.transactionType !== 'undefined' && this.transactionType === 'Transfer'">
+    <div class="form-group"
+         v-bind:class="{ 'has-error': hasError()}"
+         v-if="typeof this.transactionType !== 'undefined' && this.transactionType === 'Transfer'">
         <div class="col-sm-12">
             <select name="piggy_bank[]" ref="piggy" @input="handleInput" class="form-control" v-if="this.piggies.length > 0">
                 <option v-for="piggy in this.piggies" :label="piggy.name" :value="piggy.id">{{piggy.name}}</option>
             </select>
+            <ul class="list-unstyled" v-for="error in this.error">
+                <li class="text-danger">{{ error }}</li>
+            </ul>
         </div>
     </div>
 </template>
@@ -31,7 +36,7 @@
 <script>
     export default {
         name: "PiggyBank",
-        props: ['value','transactionType'],
+        props: ['value','transactionType','error'],
         mounted() {
             this.loadPiggies();
         },
@@ -44,6 +49,9 @@
             handleInput(e) {
                 this.$emit('input', this.$refs.piggy.value);
             },
+            hasError: function () {
+                return this.error.length > 0;
+            },
             loadPiggies: function () {
                 let URI = document.getElementsByTagName('base')[0].href + "json/piggy-banks";
                 axios.get(URI, {}).then((res) => {
diff --git a/resources/assets/js/components/transactions/StandardDate.vue b/resources/assets/js/components/transactions/StandardDate.vue
new file mode 100644
index 0000000000..ee14776f64
--- /dev/null
+++ b/resources/assets/js/components/transactions/StandardDate.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="form-group" v-bind:class="{ 'has-error': hasError()}">
+        <div class="col-sm-12">
+            <input
+                    type="date"
+                    class="form-control"
+                    name="date[]"
+                    title="Date"
+                    ref="date"
+                    autocomplete="off"
+                    :disabled="index > 0"
+                    placeholder="Date"
+                    :value="value" @input="handleInput"
+            >
+            <ul class="list-unstyled" v-for="error in this.error">
+                <li class="text-danger">{{ error }}</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['error', 'value', 'index'],
+        name: "StandardDate",
+        methods: {
+            hasError: function () {
+                return this.error.length > 0;
+            },
+            handleInput(e) {
+                this.$emit('input', this.$refs.date.value);
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/components/transactions/Tags.vue b/resources/assets/js/components/transactions/Tags.vue
index ee8968244d..24051cb3a0 100644
--- a/resources/assets/js/components/transactions/Tags.vue
+++ b/resources/assets/js/components/transactions/Tags.vue
@@ -19,7 +19,9 @@
   -->
 
 <template>
-    <div class="form-group">
+    <div class="form-group"
+         v-bind:class="{ 'has-error': hasError()}"
+    >
         <div class="col-sm-12">
             <vue-tags-input
                     v-model="tag"
@@ -30,6 +32,9 @@
                     @tags-changed="update"
                     placeholder="Tags"
             />
+            <ul class="list-unstyled" v-for="error in this.error">
+                <li class="text-danger">{{ error }}</li>
+            </ul>
         </div>
     </div>
 </template>
@@ -43,7 +48,7 @@
         components: {
             VueTagsInput
         },
-        props: ['value'],
+        props: ['value','error'],
         data() {
             return {
                 tag: '',
@@ -61,6 +66,9 @@
                 this.tags = newTags;
                 this.$emit('input', this.tags);
             },
+            hasError: function () {
+                return this.error.length > 0;
+            },
             initItems() {
                 if (this.tag.length < 2) {
                     return;
diff --git a/resources/assets/js/components/transactions/TransactionDescription.vue b/resources/assets/js/components/transactions/TransactionDescription.vue
new file mode 100644
index 0000000000..9072b9d8b9
--- /dev/null
+++ b/resources/assets/js/components/transactions/TransactionDescription.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="form-group" v-bind:class="{ 'has-error': hasError()}">
+        <div class="col-sm-12">
+            <input
+                    type="text"
+                    class="form-control"
+                    name="description[]"
+                    title="Description"
+                    ref="descr"
+                    autocomplete="off"
+                    placeholder="Description"
+                    :value="value" @input="handleInput"
+            >
+            <ul class="list-unstyled" v-for="error in this.error">
+                <li class="text-danger">{{ error }}</li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: ['error', 'value', 'index'],
+        name: "TransactionDescription",
+        methods: {
+            hasError: function () {
+                return this.error.length > 0;
+            },
+            handleInput(e) {
+                this.$emit('input', this.$refs.descr.value);
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file