Merge pull request #147 from dod-ccpo/ui/input-field-frontend-validation

Ui/input field frontend validation

templates/components/text_input.html

@@ -1,23 +1,64 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro TextInput(field, placeholder='') -%}
-  <div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
-    <label for={{field.name}}>
-      {{ field.label }}
+{% macro TextInput(field, placeholder='', validation='anything', paragraph=False) -%}
+  <textinput
+    name='{{ field.name }}'
+    validation='{{ validation }}'
+    {% 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 usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
+
+      <label for={{field.name}}>
+        {{ field.label | striptags }}
+
+        {% if field.description %}
+          <span class='usa-input__help'>{{ field.description | safe }}</span>
+        {% endif %}
+
+        <span v-show='showError'>{{ Icon('alert') }}</span>
+        <span v-show='showValid'>{{ Icon('ok') }}</span>
+
+      </label>
+
+      {% if paragraph %}
+
+        <textarea
+          v-on:input='onInput'
+          v-on:change='onChange'
+          v-bind:value='value'
+          id='{{ field.name }}'
+          ref='input'
+          placeholder='{{ placeholder }}'>
+        </textarea>
+
+      {% else %}
+
+        <masked-input
+          v-on:input='onInput'
+          v-on:change='onChange'
+          v-bind:value='value'
+          v-bind:mask='mask'
+          v-bind:pipe='pipe'
+          v-bind:keep-char-positions='keepCharPositions'
+          v-bind:aria-invalid='showError'
+          id='{{ field.name }}'
+          type='text'
+          ref='input'
+          placeholder='{{ placeholder }}'>
+        </masked-input>
 
-      {% if field.description %}
-        <span class='usa-input__help'>{{ field.description | safe }}</span>
       {% endif %}
 
-      {% if field.errors %}{{ Icon('alert') }}{% endif %}
-    </label>
+      <input type='hidden' v-bind:value='rawValue' name='{{ field.name }}' />
 
-    {{ field(placeholder=placeholder) | safe }}
+      <template v-if='showError'>
+        <span v-if='initialErrors' v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
+        <span v-if='!initialErrors' class='usa-input__message' v-html='validationError'></span>
+      </template>
 
-    {% if field.errors %}
-      {% for error in field.errors %}
-        <span class='usa-input__message'>{{ error }}</span>
-      {% endfor %}
-    {% endif %}
-  </div>
-{%- endmacro %}
+    </div>
+</textinput>
+{%- endmacro %}

templates/requests/screen-1.html

@@ -22,27 +22,27 @@
 <p><em>All fields are required, unless specified optional.</em></p>
 
 <h2>General</h2>
-{{ TextInput(f.dod_component) }}
-{{ TextInput(f.jedi_usage,placeholder="e.g. We are migrating XYZ application to the cloud so that...") }}
+{{ OptionsInput(f.dod_component) }}
+{{ TextInput(f.jedi_usage, paragraph=True, placeholder="e.g. We are migrating XYZ application to the cloud so that...") }}
 
 <h2>Cloud Readiness</h2>
-{{ TextInput(f.num_software_systems,placeholder="Number of systems") }}
+{{ TextInput(f.num_software_systems, validation='integer') }}
 {{ OptionsInput(f.jedi_migration) }}
 {{ OptionsInput(f.rationalization_software_systems) }}
 {{ OptionsInput(f.technical_support_team) }}
 {{ OptionsInput(f.organization_providing_assistance) }}
 {{ OptionsInput(f.engineering_assessment) }}
-{{ TextInput(f.data_transfers) }}
-{{ TextInput(f.expected_completion_date) }}
+{{ OptionsInput(f.data_transfers) }}
+{{ OptionsInput(f.expected_completion_date) }}
 {{ OptionsInput(f.cloud_native) }}
 
 <h2>Financial Usage</h2>
-{{ TextInput(f.estimated_monthly_spend) }}
+{{ TextInput(f.estimated_monthly_spend, validation='dollars') }}
 <p>So this means you are spending approximately <b>$X</b> annually</p>
-{{ TextInput(f.dollar_value) }}
-{{ TextInput(f.number_user_sessions) }}
-{{ TextInput(f.average_daily_traffic) }}
-{{ TextInput(f.start_date) }}
+{{ TextInput(f.dollar_value, validation='dollars') }}
+{{ TextInput(f.number_user_sessions, validation='integer') }}
+{{ TextInput(f.average_daily_traffic, placeholder='Gigabytes per day', validation='gigabytes') }}
+{{ TextInput(f.start_date, validation='date', placeholder='MM / DD / YYYY') }}
 
 
 {% endblock %}

templates/requests/screen-2.html

@@ -19,16 +19,16 @@
 
 <p>Please tell us more about you.</p>
 
-{{ TextInput(f.fname_request,placeholder='First Name') }}
-{{ TextInput(f.lname_request,placeholder='Last Name') }}
-{{ TextInput(f.email_request,placeholder='jane@mail.mil') }}
-{{ TextInput(f.phone_number,placeholder='(123) 456-7890') }}
+{{ TextInput(f.fname_request, placeholder='First Name') }}
+{{ TextInput(f.lname_request, placeholder='Last Name') }}
+{{ TextInput(f.email_request, placeholder='jane@mail.mil', validation='email') }}
+{{ TextInput(f.phone_number, placeholder='e.g. (123) 456-7890', validation='usPhone') }}
 
 <p>We want to collect the following information from you for security auditing and determining priviledged user access</p>
 
 {{ TextInput(f.service_branch,placeholder='e.g. US Air Force, US Army, US Navy, Marine Corps, Defense Media Agency') }}
 {{ OptionsInput(f.citizenship) }}
 {{ OptionsInput(f.designation) }}
-{{ TextInput(f.date_latest_training) }}
+{{ TextInput(f.date_latest_training, placeholder='MM / DD / YYYY', validation='date') }}
 
 {% endblock %}

templates/requests/screen-3.html

@@ -30,7 +30,7 @@
 
 {{ TextInput(f.fname_poc,placeholder='First Name') }}
 {{ TextInput(f.lname_poc,placeholder='Last Name') }}
-{{ TextInput(f.email_poc,placeholder='jane@mail.mil') }}
-{{ TextInput(f.dodid_poc,placeholder='10-digit number on the back of the CAC') }}
+{{ TextInput(f.email_poc,placeholder='jane@mail.mil', validation='email') }}
+{{ TextInput(f.dodid_poc,placeholder='10-digit number on the back of the CAC', validation='dodId') }}
 
 {% endblock %}