form validations and messaging for dropdowns working as per specs

client/app/components/packages/projects/projects-new-information.hbs

@@ -28,8 +28,15 @@
       @placeholder='select a borough' as |borough|>
        {{borough.label}}
     </PowerSelect>
+    {{#if form.errors.borough}}
+      {{#each form.errors.borough.validation as |message|}}
+        <div class="form-error is-visible" data-test-validation-message="select a borough">{{message}}</div>
+      {{/each}}
+    {{/if}}
   </Ui::Question>
 
+{{!-- template-lint-disable no-log --}}
+{{log "form errors" form.errors}}
   <Ui::Question @required={{true}} as |Q|>
     <Q.Label data-test-projects-new-applicant-type>
       Applicant Type
@@ -48,6 +55,12 @@
       @placeholder='select applicant type' as |dcpApplicantType| >
       {{dcpApplicantType.label}}
     </PowerSelect>
+    {{#if form.errors.applicantType}}
+      {{#each form.errors.applicantType.validation as |message|}}
+          <div class="form-error is-visible"    data-test-validation-message="select an Applicant Type"> {{message}}
+        </div>
+      {{/each}}
+    {{/if}}
   </Ui::Question>
 </form.Section>
 {{/let}}

client/app/validations/submittable-projects-new-form.js

@@ -9,109 +9,109 @@ export default {
     validateLength({
       min: 0,
       max: 50,
-      message: 'Text is too long (max {max} characters)',
+      message: "Text is too long (max {max} characters)",
     }),
     validatePresence({
       presence: true,
-      message: 'This field is required',
+      message: "This field is required",
     }),
   ],
   primaryContactLastName: [
     validateLength({
       min: 0,
       max: 50,
-      message: 'Text is too long (max {max} characters)',
+      message: "Text is too long (max {max} characters)",
     }),
     validatePresence({
       presence: true,
-      message: 'This field is required',
+      message: "This field is required",
     }),
   ],
   primaryContactEmail: [
     validateLength({
       min: 0,
       max: 50,
-      message: 'Text is too long (max {max} characters)',
+      message: "Text is too long (max {max} characters)",
     }),
     validatePresence({
       presence: true,
-      message: 'This field is required',
+      message: "This field is required",
     }),
     validateFormat({
-      type: 'email',
+      type: "email",
       // Set allowBlank=true so that the validation message
       // only appears after user first types something.
       // This field still indicates it is 'required'
       // through validatePresence
       allowBlank: true,
-      message: 'Must be a valid email address',
+      message: "Must be a valid email address",
     }),
   ],
   primaryContactPhone: [
     validateLength({
       min: 0,
       max: 10,
-      message: 'Text is too long (max {max} characters)',
+      message: "Text is too long (max {max} characters)",
     }),
   ],
   applicantFirstName: [
     validateLength({
       min: 0,
       max: 50,
-      message: 'Text is too long (max {max} characters)',
+      message: "Text is too long (max {max} characters)",
     }),
     validatePresence({
       presence: true,
-      message: 'This field is required',
+      message: "This field is required",
     }),
   ],
   applicantLastName: [
     validateLength({
       min: 0,
       max: 50,
-      message: 'Text is too long (max {max} characters)',
+      message: "Text is too long (max {max} characters)",
     }),
     validatePresence({
       presence: true,
-      message: 'This field is required',
+      message: "This field is required",
     }),
   ],
   applicantEmail: [
     validateLength({
       min: 0,
       max: 50,
-      message: 'Text is too long (max {max} characters)',
+      message: "Text is too long (max {max} characters)",
     }),
     validatePresence({
       presence: true,
-      message: 'This field is required',
+      message: "This field is required",
     }),
     validateFormat({
-      type: 'email',
+      type: "email",
       // Set allowBlank=true so that the validation message
       // only appears after user first types something.
       // This field still indicates it is 'required'
       // through validatePresence
       allowBlank: true,
-      message: 'Must be a valid email address',
+      message: "Must be a valid email address",
     }),
   ],
   applicantPhone: [
     validateLength({
       min: 0,
       max: 10,
-      message: 'Text is too long (max {max} characters)',
+      message: "Text is too long (max {max} characters)",
     }),
   ],
   projectName: [
     validateLength({
       min: 0,
       max: 50,
-      message: 'Text is too long (max {max} characters)',
+      message: "Text is too long (max {max} characters)",
     }),
     validatePresence({
       presence: true,
-      message: 'This field is required',
+      message: "This field is required",
     }),
   ],
   borough: [
@@ -120,7 +120,7 @@ export default {
       message: 'Please select a Borough',
     }),
   ],
-  dcpApplicantType: [
+  applicantType: [
     validatePresence({
       presence: true,
       message: 'Please select an Applicant Type',