It seems that Clientside validation is not working with Email confirmation field if you input two different email addresses to the field.

The validation works after trying to submit the form.

Tested with Webform 8.x-5.13 and Clientside validation 8.x-1.20.

Example form:

uuid: e50abae5-2515-449c-99b7-4460b5b1e92c
langcode: en
status: open
dependencies: {  }
open: null
close: null
weight: 0
uid: 1
template: false
archive: false
id: email_confirm
title: 'Email confirm'
description: ''
category: ''
elements: |
  email_confirm:
    '#type': webform_email_confirm
    '#title': 'Email confirm'
    '#required': true
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_admin_theme: false
  form_title: source_entity_webform
  form_submit_once: false
  form_exception_message: ''
  form_open_message: ''
  form_close_message: ''
  form_previous_submissions: true
  form_confidential: false
  form_confidential_message: ''
  form_remote_addr: true
  form_convert_anonymous: false
  form_prepopulate: false
  form_prepopulate_source_entity: false
  form_prepopulate_source_entity_required: false
  form_prepopulate_source_entity_type: ''
  form_reset: false
  form_disable_autocomplete: false
  form_novalidate: true
  form_disable_inline_errors: false
  form_required: false
  form_unsaved: false
  form_disable_back: false
  form_submit_back: false
  form_autofocus: false
  form_details_toggle: false
  form_access_denied: default
  form_access_denied_title: ''
  form_access_denied_message: ''
  form_access_denied_attributes: {  }
  form_file_limit: ''
  submission_label: ''
  submission_log: 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: {  }
  submission_exception_message: ''
  submission_locked_message: ''
  submission_excluded_elements: {  }
  submission_exclude_empty: false
  submission_exclude_empty_checkbox: false
  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_track: ''
  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_title: ''
  confirmation_message: ''
  confirmation_url: ''
  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
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: {  }

It should give the following clientside validation error: The specified email addresses do not match.

There is also a Simplytest.me available with an example form: https://stm5ec535882ad56-xwp6hnapznxyqztqgmjtacdeunxnqtnc.tugboat.qa/for...

CommentFileSizeAuthor
#4 3138266-5.patch683 bytesjrockowitz
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

HeikkiY created an issue. See original summary.

HeikkiY’s picture

Issue summary: View changes
HeikkiY’s picture

Issue summary: View changes
jrockowitz’s picture

Status: Active » Needs review
FileSize
683 bytes

The attached fixes the issue.

  • jrockowitz authored c956195 on 8.x-5.x
    Issue #3138266 by jrockowitz: Email confirmation clientside validation...
jrockowitz’s picture

Status: Needs review » Fixed

I committed the patch. Please download the latest dev release to review.

HeikkiY’s picture

I can confirm this solves the issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

rbrum’s picture

As of Drupal 8.9.2, this bug has resurfaced. The email confirm field won't show a client-side validation error if the emails differ, unless all other fields are valid first. In other words, if all other fields are validated, only then will mismatched emails in the "Email Confirm" field show an error.

At some point, the code from the patch in comment #4 disappeared. Looking at modules/contrib/webform/src/Element/WebformEmailConfirm.php, this patch's code should be present on or around line 160 of the current version of the file.

When I manually [re-]apply this same patch, the correct behavior returns as expected, meaning this functionality was lost at some point. The patch will need to be re-applied to the code base.

Altcom_Neil’s picture

If anyone comes across this as I did I simply had to install the Webform Clientside Validation sub module that comes with Webform 8.x-5.17 and 6.x

The code has been moved to webform_clientside_validation.module _webform_clientside_validation_webform_email_confirm_process() from \Drupal\webform\Element\WebformEmailConfirm::processWebformEmailConfirm