Date validation

modules/localgov_forms_date/src/Element/LocalgovFormsDate.php

@@ -3,6 +3,7 @@
 namespace Drupal\localgov_forms_date\Element;
 
 use Drupal\Core\Datetime\Element\Datelist;
+use Drupal\Core\Form\FormStateInterface;
 
 /**
  * Provides a datelist element.
@@ -15,14 +16,15 @@ class LocalgovFormsDate extends Datelist {
    * {@inheritdoc}
    */
   public function getInfo() {
-    $class = get_class($this);
+
     return [
       '#input' => TRUE,
       '#element_validate' => [
-        [$class, 'validateDatelist'],
+        [static::class, 'validateDatelist'],
+        [static::class, 'areDatePartsNumeric'],
       ],
       '#process' => [
-        [$class, 'processDatelist'],
+        [static::class, 'processDatelist'],
       ],
       '#theme' => 'datetime_form',
       '#theme_wrappers' => ['datetime_wrapper'],
@@ -35,4 +37,64 @@ public function getInfo() {
     ];
   }
 
+  /**
+   * Validation callback.
+   *
+   * Are all the parts of a date numeric?  There are three parts we are
+   * concerned about here: day, month, and year.  If any of these are not
+   * numeric, validation fails.  When this happens, we restore the date parts
+   * to what was originally submitted.  Note that the date parts go through an
+   * integer conversion before they reach validation.  The purpose of the
+   * restoration is to bring back what was originally submitted.
+   *
+   * Example: "1A" is submitted as the "day" value.  This turns into *1* as part
+   * of form processing.  "1A" fails validation, so we restore the day value to
+   * "1A".  If we don't do this, the day value will render as "1" instead of
+   * "1A" along with validation errors.
+   */
+  public static function areDatePartsNumeric(&$element, FormStateInterface $form_state, &$complete_form) :void {
+
+    $err_msg                 = [];
+    $unprocessed_day_input   = $element['#value']['day'] ?? '';
+    $unprocessed_month_input = $element['#value']['month'] ?? '';
+    $unprocessed_year_input  = $element['#value']['year'] ?? '';
+
+    if (!empty($unprocessed_day_input) && !ctype_digit($unprocessed_day_input)) {
+      $err_msg[] = 'Invalid day.';
+    }
+    if (!empty($unprocessed_month_input) && !ctype_digit($unprocessed_month_input)) {
+      $err_msg[] = 'Invalid month.';
+    }
+    if (!empty($unprocessed_year_input) && !ctype_digit($unprocessed_year_input)) {
+      $err_msg[] = 'Invalid year.';
+    }
+
+    if ($err_msg) {
+      $form_state->setError($element, implode(' ', $err_msg));
+      static::restoreUnprocessedDate($element);
+    }
+  }
+
+  /**
+   * Date input restoration.
+   *
+   * Returns date part values to the raw input.  This raw input has gone through
+   * an integer conversion as part of form processing.  Here we restore the
+   * original raw string values.
+   */
+  private static function restoreUnprocessedDate(array &$element) :void {
+
+    if (isset($element['#value']['year'])) {
+      $element['year']['#value'] = $element['#value']['year'];
+    }
+
+    if (isset($element['#value']['month'])) {
+      $element['month']['#value'] = $element['#value']['month'];
+    }
+
+    if (isset($element['#value']['day'])) {
+      $element['day']['#value'] = $element['#value']['day'];
+    }
+  }
+
 }

modules/localgov_forms_date/src/Plugin/WebformElement/LocalgovFormsDate.php

@@ -82,14 +82,20 @@ public static function afterBuild(array $element, FormStateInterface $form_state
     // Set the property of the date of birth elements.
     $element['day']['#attributes']['placeholder'] = t('DD');
     $element['day']['#maxlength'] = 2;
+    $element['day']['#attributes']['inputmode'] = 'numeric';
+    $element['day']['#attributes']['pattern'] = '[0-9]*';
     $element['day']['#attributes']['class'][] = 'localgov_forms_date__day';
 
     $element['month']['#attributes']['placeholder'] = t('MM');
     $element['month']['#maxlength'] = 2;
+    $element['month']['#attributes']['inputmode'] = 'numeric';
+    $element['month']['#attributes']['pattern'] = '[0-9]*';
     $element['month']['#attributes']['class'][] = 'localgov_forms_date__month';
 
     $element['year']['#attributes']['placeholder'] = t('YYYY');
     $element['year']['#maxlength'] = 4;
+    $element['year']['#attributes']['inputmode'] = 'numeric';
+    $element['year']['#attributes']['pattern'] = '[0-9]*';
     $element['year']['#attributes']['class'][] = 'localgov_forms_date__year';
 
     return $element;

modules/localgov_forms_date/tests/modules/localgov_forms_date_test/config/install/webform.webform.date_test.yml

@@ -0,0 +1,204 @@
+langcode: en
+status: open
+dependencies:
+  enforced:
+    module:
+      - webform
+      - localgov_forms_date
+weight: 0
+open: null
+close: null
+uid: 1
+template: false
+archive: false
+id: date_test
+title: 'Date test'
+description: ''
+category: ''
+elements: |-
+  date:
+    '#type': localgov_forms_date
+    '#title': Date
+css: ''
+javascript: ''
+settings:
+  ajax: false
+  ajax_scroll_top: form
+  ajax_progress_type: ''
+  ajax_effect: ''
+  ajax_speed: null
+  page: true
+  page_submit_path: ''
+  page_confirm_path: ''
+  page_theme_name: ''
+  form_title: both
+  form_submit_once: false
+  form_open_message: ''
+  form_close_message: ''
+  form_exception_message: ''
+  form_previous_submissions: true
+  form_confidential: false
+  form_confidential_message: ''
+  form_disable_remote_addr: false
+  form_convert_anonymous: false
+  form_prepopulate: false
+  form_prepopulate_source_entity: false
+  form_prepopulate_source_entity_required: false
+  form_prepopulate_source_entity_type: ''
+  form_unsaved: false
+  form_disable_back: false
+  form_submit_back: false
+  form_disable_autocomplete: false
+  form_novalidate: false
+  form_disable_inline_errors: false
+  form_required: false
+  form_autofocus: false
+  form_details_toggle: false
+  form_reset: false
+  form_access_denied: default
+  form_access_denied_title: ''
+  form_access_denied_message: ''
+  form_access_denied_attributes: {  }
+  form_file_limit: ''
+  form_attributes: {  }
+  form_method: ''
+  form_action: ''
+  share: false
+  share_node: false
+  share_theme_name: ''
+  share_title: true
+  share_page_body_attributes: {  }
+  submission_label: ''
+  submission_exception_message: ''
+  submission_locked_message: ''
+  submission_log: false
+  submission_excluded_elements: {  }
+  submission_exclude_empty: false
+  submission_exclude_empty_checkbox: false
+  submission_views: {  }
+  submission_views_replace: {  }
+  submission_user_columns: {  }
+  submission_user_duplicate: false
+  submission_access_denied: default
+  submission_access_denied_title: ''
+  submission_access_denied_message: ''
+  submission_access_denied_attributes: {  }
+  previous_submission_message: ''
+  previous_submissions_message: ''
+  autofill: false
+  autofill_message: ''
+  autofill_excluded_elements: {  }
+  wizard_progress_bar: true
+  wizard_progress_pages: false
+  wizard_progress_percentage: false
+  wizard_progress_link: false
+  wizard_progress_states: false
+  wizard_start_label: ''
+  wizard_preview_link: false
+  wizard_confirmation: true
+  wizard_confirmation_label: ''
+  wizard_auto_forward: true
+  wizard_auto_forward_hide_next_button: false
+  wizard_keyboard: true
+  wizard_track: ''
+  wizard_prev_button_label: ''
+  wizard_next_button_label: ''
+  wizard_toggle: false
+  wizard_toggle_show_label: ''
+  wizard_toggle_hide_label: ''
+  preview: 0
+  preview_label: ''
+  preview_title: ''
+  preview_message: ''
+  preview_attributes: {  }
+  preview_excluded_elements: {  }
+  preview_exclude_empty: true
+  preview_exclude_empty_checkbox: false
+  draft: none
+  draft_multiple: false
+  draft_auto_save: false
+  draft_saved_message: ''
+  draft_loaded_message: ''
+  draft_pending_single_message: ''
+  draft_pending_multiple_message: ''
+  confirmation_type: page
+  confirmation_url: ''
+  confirmation_title: ''
+  confirmation_message: ''
+  confirmation_attributes: {  }
+  confirmation_back: true
+  confirmation_back_label: ''
+  confirmation_back_attributes: {  }
+  confirmation_exclude_query: false
+  confirmation_exclude_token: false
+  confirmation_update: false
+  limit_total: null
+  limit_total_interval: null
+  limit_total_message: ''
+  limit_total_unique: false
+  limit_user: null
+  limit_user_interval: null
+  limit_user_message: ''
+  limit_user_unique: false
+  entity_limit_total: null
+  entity_limit_total_interval: null
+  entity_limit_user: null
+  entity_limit_user_interval: null
+  purge: none
+  purge_days: null
+  results_disabled: false
+  results_disabled_ignore: false
+  results_customize: false
+  token_view: false
+  token_update: false
+  token_delete: false
+  serial_disabled: false
+access:
+  create:
+    roles:
+      - anonymous
+      - authenticated
+    users: {  }
+    permissions: {  }
+  view_any:
+    roles: {  }
+    users: {  }
+    permissions: {  }
+  update_any:
+    roles: {  }
+    users: {  }
+    permissions: {  }
+  delete_any:
+    roles: {  }
+    users: {  }
+    permissions: {  }
+  purge_any:
+    roles: {  }
+    users: {  }
+    permissions: {  }
+  view_own:
+    roles: {  }
+    users: {  }
+    permissions: {  }
+  update_own:
+    roles: {  }
+    users: {  }
+    permissions: {  }
+  delete_own:
+    roles: {  }
+    users: {  }
+    permissions: {  }
+  administer:
+    roles: {  }
+    users: {  }
+    permissions: {  }
+  test:
+    roles: {  }
+    users: {  }
+    permissions: {  }
+  configuration:
+    roles: {  }
+    users: {  }
+    permissions: {  }
+handlers: {  }
+variants: {  }

modules/localgov_forms_date/tests/modules/localgov_forms_date_test/localgov_forms_date_test.info.yml

@@ -0,0 +1,9 @@
+name: 'Localgov form date test'
+description: 'Helper module to setup a webform with a localgov_forms_date field.'
+type: module
+package: Testing
+core_version_requirement: ^8.8 || ^9
+
+dependencies:
+- webform:webform
+- localgov_forms:localgov_forms_date

modules/localgov_forms_date/tests/modules/localgov_forms_date_test/localgov_forms_date_test.module

@@ -0,0 +1,8 @@
+<?php
+
+/**
+ * @file
+ * Hook implementations.
+ */
+
+declare(strict_types = 1);