[SDPA-6117] - Wire up custom string for 'this field is required' error (

#1222)

* SDPA-6117 - Wire up custom required error message value

* SDPA-6117 - Change custom validator lifecycle hook from 'mounted' to 'created'

* Test commit

Co-authored-by: Nick Santamaria <nicholas.santamaria@dpc.vic.gov.au>

README.md

@@ -222,3 +222,4 @@ The Department of Premier and Cabinet partnered with Salsa Digital to deliver Si
     <img src="docs/salsa-logo.png" alt="Logo" height="150">
   </a>
 </p>
+

packages/components/Molecules/Form/index.vue

@@ -81,7 +81,7 @@ export default {
       isClearingForm: false
     }
   },
-  mounted () {
+  created () {
     if (this.listenForClearForm) {
       RplFormEventBus.$on('clearform', this.clearForm)
     }
@@ -100,6 +100,15 @@ export default {
       }
       return []
     }
+    // Custom 'required' validator which uses the drupal 'required message'
+    // if the field is empty.
+    VueFormGenerator.validators.rplRequired = function (value, field) {
+      if (!value || value === '') {
+        return field.requiredMessage
+      }
+
+      return null
+    }
     // Validate if multiple select is a required field, then atleast one value should be selected.
     VueFormGenerator.validators.rplSelectMultipleRequired = function (value, field) {
       if (value && value.length >= field.min) {

packages/ripple-nuxt-tide/modules/webform/mapping-filters.js

@@ -74,8 +74,16 @@ module.exports = {
       }
 
       if (element['#required']) {
-        field.required = true
-        field.validator.push('required')
+        // If a custom required error message is set, use the custom required
+        // validator instead
+        if (element['#required_error']) {
+          field.required = false
+          field.requiredMessage = element['#required_error']
+          field.validator.push('rplRequired')
+        } else {
+          field.required = true
+          field.validator.push('required')
+        }
       } else {
         field.required = false
       }
@@ -429,6 +437,23 @@ module.exports = {
         case 'webform_privacy_statement':
           group.fields = []
           group.legend = element['#privacy_statement_heading']
+
+          // If a custom required error message is set, use the custom required
+          // validator instead
+          let checkboxRequired = false
+          let checkboxRequiredMessage = element['#required_error'] ? element['#required_error'] : null
+          let checkboxValidator = []
+
+          if (element['#required']) {
+            if (checkboxRequiredMessage) {
+              checkboxRequired = false
+              checkboxValidator = ['rplRequired']
+            } else {
+              checkboxRequired = true
+              checkboxValidator = ['required']
+            }
+          }
+
           group.fields.push(
             {
               type: 'rplmarkup',
@@ -438,8 +463,9 @@ module.exports = {
               type: 'rplcheckbox',
               label: null,
               inlineLabel: element['#title'] ? element['#title'] : null,
-              required: element['#required'],
-              validator: element['#required'] ? ['required'] : [],
+              required: checkboxRequired,
+              requiredMessage: checkboxRequiredMessage,
+              validator: checkboxValidator,
               model: eName
             }
           )