Problem/Motivation

Modern browsers perform client-side validation for certain input fields. The easy example is for an input marked required.
This is only triggered when the browser detects a type="submit" being clicked.

When you attach an #ajax handler to a submit button, this seems to prevent that from correctly firing.

This is not a real validation problem, as we perform our own server-side validation. But it does negatively affect the UX.

Proposed resolution

TBD

Remaining tasks

Find a solution

User interface changes

Native validation will work for all submit buttons, not just non-Ajax ones

API changes

TBD

Data model changes

N/A

Comments

tim.plunkett created an issue. See original summary.

effulgentsia’s picture

I think this is because we bind to the button's "click" instead of the form's "submit". We probably need to add a checkValidity() call somewhere in the flow. We probably want to scope it though. E.g., for "Add another item", we don't necessarily want to trigger client-side validation of unrelated fields.

effulgentsia’s picture

effulgentsia’s picture

Issue tags: +JavaScript
tim.plunkett’s picture

Not that I really want to suggest this, but buttons like the "Add another item" define #limit_validation_errors, which could be passed along...

bobby.gryzynger’s picture

Here's a patch for 8.3.x that attempts to account for UI elements that pass #limit_validation_errors.

Status: Needs review » Needs work

The last submitted patch, 6: ajax_native_form_validation-2895477-6.patch, failed testing. View results

bobby.gryzynger’s picture

Status: Needs work » Needs review
FileSize
1.29 KB

Fixing coding standards error.

bobby.gryzynger’s picture

Reverting change to unrelated comment.

The last submitted patch, 8: ajax_native_form_validation-2895477-7.patch, failed testing. View results

Status: Needs review » Needs work

The last submitted patch, 9: ajax_native_form_validation-2895477-9.patch, failed testing. View results

bobby.gryzynger’s picture

Ensure the triggering element has a corresponding form to validate.

martin107’s picture

@bobby.gryzynger

Hi,

Drupal8 core has recently change is working practices

ajax.js should not be modified directly.... all javascript code is written in es6 and then translated into cross browser friendly *.js files

What is needed is modifications to ajax.es6.js

I hope this helps....

bobby.gryzynger’s picture

@martin107 thanks for the heads up. I've attached patches for both 8.3.x and 8.4.x with the 8.4.x adapted for es6.

tim.plunkett’s picture

You need to do the transpiling yourself, see https://www.drupal.org/node/2815083
Also, no need to produce 8.3.x patches now.

bobby.gryzynger’s picture

@tim.plunkett thanks, I was assuming that was part of the automated build. Here's the transpilied patch for 8.4.x.

bobby.gryzynger’s picture

Skipping client-side validation when an ajax link opens a dialog.

drpal’s picture

bobby.gryzynger’s picture

Status: Needs work » Needs review

It seems that the two tests that are failing here would need to be updated with this change as they expect to have to perform validation that is now performed on the front end.

In regard to testing this change, I'm open to suggestions for how that can be accomplished. I originally came across this issue as part of the Webform issue referenced on this issue. Webform has implemented the ability to submit any form via Ajax, but is there a way to write a test here that would implement a form hook (or something else) that could allow a core form to be submitted via Ajax?

drpal’s picture

Status: Needs review » Needs work

@bobby.gryzynger - Marking this back to Needs work due to the failing tests.