From a6c015753a8d0f0a89f6738060e938818ea348c3 Mon Sep 17 00:00:00 2001
From: richard-dds <richard-ctr@friends.dds.mil>
Date: Thu, 13 Jun 2019 13:18:18 -0400
Subject: [PATCH 1/3] Fix wonky form validation

---
 js/components/options_input.js          | 12 +++++++++++-
 js/components/text_input.js             | 25 ++++++++++++++++---------
 js/mixins/form.js                       |  4 ++--
 templates/components/options_input.html |  1 +
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/js/components/options_input.js b/js/components/options_input.js
index 03e868d0..d69e71d2 100644
--- a/js/components/options_input.js
+++ b/js/components/options_input.js
@@ -18,12 +18,17 @@ export default {
       default: false,
     },
     optional: Boolean,
+    nullOption: {
+      type: String,
+      default: ''
+    }
   },
 
   created: function() {
     emitEvent('field-mount', this, {
       optional: this.optional,
       name: this.name,
+      valid: this._isValid(this.value)
     })
   },
 
@@ -41,13 +46,18 @@ export default {
     onInput: function(e) {
       this.showError = false
       this.showValid = true
+      this.value = e.target.value
 
       emitEvent('field-change', this, {
         value: e.target.value,
         name: this.name,
         watch: this.watch,
-        valid: this.showValid,
+        valid: this._isValid(e.target.value)
       })
     },
+
+    _isValid: function(value) {
+      return this.optional || value !== this.nullOption
+    }
   },
 }
diff --git a/js/components/text_input.js b/js/components/text_input.js
index 942ba68a..57cd8275 100644
--- a/js/components/text_input.js
+++ b/js/components/text_input.js
@@ -70,6 +70,7 @@ export default {
     emitEvent('field-mount', this, {
       optional: this.optional,
       name: this.name,
+      valid: this._isValid(this.value)
     })
   },
 
@@ -103,15 +104,7 @@ export default {
 
     //
     _checkIfValid: function({ value, invalidate = false }) {
-      // Validate the value
-      let valid = this._validate(value)
-
-      if (!this.modified && this.initialErrors && this.initialErrors.length) {
-        valid = false
-      } else if (this.optional && value === '') {
-        valid = true
-      }
-
+      const valid = this._isValid(value)
       if (this.modified) {
         this.validationError = inputValidations[this.validation].validationError
       }
@@ -144,5 +137,19 @@ export default {
     _validate: function(value) {
       return inputValidations[this.validation].match.test(this._rawValue(value))
     },
+
+    _isValid: function(value) {
+      let valid = this._validate(value)
+
+      if (!this.modified && this.initialErrors && this.initialErrors.length) {
+        valid = false
+      } else if (this.optional && value === '') {
+        valid = true
+      } else if (!this.optional && value === '') {
+        valid = false
+      }
+
+      return valid
+    }
   },
 }
diff --git a/js/mixins/form.js b/js/mixins/form.js
index d276213f..d4490708 100644
--- a/js/mixins/form.js
+++ b/js/mixins/form.js
@@ -25,8 +25,8 @@ export default {
     },
 
     handleFieldMount: function(event) {
-      const { name, optional } = event
-      this.fields[name] = optional
+      const { name, optional, valid } = event
+      this.fields[name] = optional || valid
     },
 
     validateForm: function() {
diff --git a/templates/components/options_input.html b/templates/components/options_input.html
index 8180c5c4..784fb9e8 100644
--- a/templates/components/options_input.html
+++ b/templates/components/options_input.html
@@ -10,6 +10,7 @@
     key='{{ field.name }}'
     v-bind:watch='{{ watch | string | lower }}'
     v-bind:optional={{ optional|lower }}
+    v-bind:null-option="'{{ field.default }}'"
     >
     <div
       v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">

From eb4172517be40e7778e2d532e72941b665810459 Mon Sep 17 00:00:00 2001
From: richard-dds <richard-ctr@friends.dds.mil>
Date: Thu, 13 Jun 2019 13:27:05 -0400
Subject: [PATCH 2/3] Include flash messages

---
 templates/portfolios/new.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/templates/portfolios/new.html b/templates/portfolios/new.html
index d5cc70bc..1469e999 100644
--- a/templates/portfolios/new.html
+++ b/templates/portfolios/new.html
@@ -8,6 +8,7 @@
 {% block content %}
 
 <main class="usa-section usa-content">
+  {% include "fragments/flash.html" %}
   <h1>New Portfolio Form</h1>
   <base-form inline-template>
     <form id="portfolio-create" action="{{ url_for('portfolios.create_portfolio') }}" method="POST">

From 06ea746f385ee99eba837db458d5b1248c02c8c7 Mon Sep 17 00:00:00 2001
From: richard-dds <richard-ctr@friends.dds.mil>
Date: Thu, 13 Jun 2019 13:33:15 -0400
Subject: [PATCH 3/3] Formatting

---
 js/components/options_input.js | 10 +++++-----
 js/components/text_input.js    |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/js/components/options_input.js b/js/components/options_input.js
index d69e71d2..48213378 100644
--- a/js/components/options_input.js
+++ b/js/components/options_input.js
@@ -20,15 +20,15 @@ export default {
     optional: Boolean,
     nullOption: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   },
 
   created: function() {
     emitEvent('field-mount', this, {
       optional: this.optional,
       name: this.name,
-      valid: this._isValid(this.value)
+      valid: this._isValid(this.value),
     })
   },
 
@@ -52,12 +52,12 @@ export default {
         value: e.target.value,
         name: this.name,
         watch: this.watch,
-        valid: this._isValid(e.target.value)
+        valid: this._isValid(e.target.value),
       })
     },
 
     _isValid: function(value) {
       return this.optional || value !== this.nullOption
-    }
+    },
   },
 }
diff --git a/js/components/text_input.js b/js/components/text_input.js
index 57cd8275..09367d2d 100644
--- a/js/components/text_input.js
+++ b/js/components/text_input.js
@@ -70,7 +70,7 @@ export default {
     emitEvent('field-mount', this, {
       optional: this.optional,
       name: this.name,
-      valid: this._isValid(this.value)
+      valid: this._isValid(this.value),
     })
   },
 
@@ -150,6 +150,6 @@ export default {
       }
 
       return valid
-    }
+    },
   },
 }