Problem/Motivation

When "Prevent duplicate submissions for all webforms" is enabled, invalid inputs in phone fields with JS "International Telephone Input" Widget prevent form submissions, even after the input was corrected/valid again.

Steps to reproduce

  1. In global webform settings "/admin/structure/webform/config", in the "Form behaviors" section, enable the option "Prevent duplicate submissions for all webforms"
  2. Create a form with a phone field
  3. Enable "Enhance support for international phone numbers" on the phone field
  4. Fill out the form with any invalid phone number, e.g. "123"
  5. (The validation kicks in onblur, but do not correct the error)
  6. Click the submit button
  7. The form will not be submitted, but the button will become disabled.
  8. Correcting the phone number now will not remove the ".is-disabled" class, there is no way to submit the form anymore (except completely reloading the page)

Side notes

Fixing an invalid phone number before clicking the submit button works as expected and allows form submissions.
The form is not submitted, there is no request visible in the dev tools. I assume the problem is on client side JS level.
My tests were done with a webform embedded in a paragraph entity inside a node entity. Ajax was disabled.
The problem is isolated to incorrect inputs. An empty + required phone field is handled by native browser validation and can be corrected even after clicking the submit button.
The problem seems to be isolated to the phone widget, an invalid Chosen JS replaced < select > did allow form submissions.

Comments

hudri created an issue. See original summary.

hudri’s picture

It is a minor issue when filling the form by hand, because most users seem to instantly correct an invalid phone input before clicking the submit button.

But it is quite nasty when browser form auto-fill enters an invalid input, because in that case the error message might show up somewhere else on the form, not near the users input position / attention => the user clicks the submit button => the JS validation kicks in and prevents form submission => form is now un-submitable.

jrockowitz’s picture

Status: Active » Postponed (maintainer needs more info)
StatusFileSize
new4.72 KB

I am not able to replicate this using the steps you provided with the attached example webform.

Are you able to reproduce this issue using the attached webform?

hudri’s picture

Title: Invalid JS "International Telephone Input" prevents form submission » "International Telephone Input" + "Prevent duplicate submissions" prevents form submission
Issue summary: View changes

I could track it down to the global webform setting "Prevent duplicate submissions for all webforms". If this global option is checked, I can reproduce the issue even with the minimal test case. When I disable duplicate submissions, the error handling works correctly.

I've updated the steps-to-reproduce accordingly.

hudri’s picture

Status: Postponed (maintainer needs more info) » Active
jrockowitz’s picture

Version: 6.0.3 » 8.x-5.x-dev
Status: Active » Needs review
StatusFileSize
new4.75 KB
new662 bytes

The attached webform replicates this issue and the attached patch for 8.x-5.x and 6.x fixes the issue,

  • jrockowitz authored 13c1e61 on 8.x-5.x
    Issue #3218208 by jrockowitz: "International Telephone Input" + "Prevent...
jrockowitz’s picture

Status: Needs review » Fixed

  • jrockowitz authored 13c1e61 on 6.x
    Issue #3218208 by jrockowitz: "International Telephone Input" + "Prevent...

Status: Fixed » Closed (fixed)

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