Fix input validations

js/components/text_input.js

@@ -14,27 +14,37 @@ export default {
       type: String,
       default: () => 'anything'
     },
-    setValue: {
+    initialValue: {
       type: String,
       default: () => ''
-    }
+    },
+    initialErrors: Array
   },
 
   data: function () {
     return {
-      showError: false,
+      showError: (this.initialErrors && this.initialErrors.length) || false,
       showValid: false,
       mask: inputValidations[this.validation].mask,
       pipe: inputValidations[this.validation].pipe || undefined,
       keepCharPositions: inputValidations[this.validation].keepCharPositions || false,
-      value: this.setValue
+      value: this.initialValue
+    }
+  },
+
+  computed:{
+    rawValue: function () {
+      return this._rawValue(this.value)
     }
   },
 
   mounted: function () {
-    if (this.value && this.mask) {
+    if (this.value) {
       this._checkIfValid({ value: this.value, invalidate: true })
-      this.value = conformToMask(this.value, this.mask).conformedValue
+
+      if (this.mask) {
+        this.value = conformToMask(this.value, this.mask).conformedValue
+      }
     }
   },
 

templates/components/text_input.html

@@ -4,24 +4,22 @@
   <textinput
     name='{{ field.name }}'
     validation='{{ validation }}'
-    {% if field.data %}set-value='{{ field.data }}'{% endif %}
+    {% if field.data %}initial-value='{{ field.data }}'{% endif %}
+    {% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}
     inline-template>
 
     <div
-      v-bind:class="['usa-input {% if field.errors %}usa-input--error{% endif %} usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
+      v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
 
       <label for={{field.name}}>
-        {{ field.label }}
+        {{ field.label | striptags }}
+
         {% if field.description %}
           <span class='usa-input__help'>{{ field.description | safe }}</span>
         {% endif %}
 
-        {% if field.errors %}
-          {{ Icon('alert') }}
-        {% endif %}
-
-        <template v-if='showError'>{{ Icon('alert') }}</template>
-        <template v-if='showValid'>{{ Icon('ok') }}</template>
+        <span v-show='showError'>{{ Icon('alert') }}</span>
+        <span v-show='showValid'>{{ Icon('ok') }}</span>
 
       </label>
 
@@ -32,7 +30,6 @@
           v-on:change='onChange'
           v-bind:value='value'
           id='{{ field.name }}'
-          name='{{ field.name }}'
           ref='input'
           placeholder='{{ placeholder }}'>
         </textarea>
@@ -47,7 +44,6 @@
           v-bind:pipe='pipe'
           v-bind:keep-char-positions='keepCharPositions'
           id='{{ field.name }}'
-          name='{{ field.name }}'
           type='text'
           ref='input'
           placeholder='{{ placeholder }}'
@@ -56,11 +52,12 @@
 
       {% endif %}
 
-      {% if field.errors %}
-        {% for error in field.errors %}
-          <span class='usa-input__message'>{{ error }}</span>
-        {% endfor %}
-      {% endif %}
+      <input type='hidden' v-bind:value='rawValue' name='{{ field.name }}' />
+
+      <template v-if='showError'>
+        <span v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
+      </template>
+
     </div>
 </textinput>
 {%- endmacro %}