Fix wonky form validation

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
+    }
   },
 }

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
+    }
   },
 }

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() {

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 }]">