The following sequence results in a form that the user can never submit.

Steps to reproduce:
1. Configure a content type with a *required* "Long Text" field, and a file upload (or, for example, an integer field with unlimited cardinality).
3. Trigger an ajax rebuild (for example, upload a file with ajax auto-submit, or press the "add another value" button of the integer field)
4. Enter a value for the Long Text field WYSIWYG, and complete any other fields so the form should be submittable.
5. Click submit.

Result: nothing happens, the form isn't even submitted to the server.
Chrome console shows an error : "An invalid form control with name='field_text[0][value]" is not focusable.
Meaning : the HTML5 client-side validation tries to show a "Please fill in that element" error on the textarea input "below" the CKEditor input because it considers it's empty, and fails because that textarea is hidden. So submission is just stopped, with no message shown.

The HTML for that textarea on the initial page load :

<textarea class="js-text-full text-full form-textarea required resize-vertical" data-drupal-selector="edit-field-text-0-value" id="edit-field-text-0-value" name="field_text[0][value]" rows="5" cols="60" placeholder="" aria-required="true" data-editor-active-text-format="basic_html" data-editor-required="true" style="visibility: hidden; display: none;"></textarea>

After the ajax rebuild :

<textarea class="js-text-full text-full form-textarea required resize-vertical" data-drupal-selector="edit-field-text-0-value" id="edit-field-text-0-value" name="field_text[0][value]" rows="5" cols="60" placeholder="" aria-required="true" data-editor-active-text-format="basic_html" style="visibility: hidden; display: none;" required="required"></textarea>

That is : data-editor-required="true" turned into required="required"
which then triggers client-side validation (which fails to show the message because the element is hidden)

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mbaynton created an issue. See original summary.

mbaynton’s picture

Issue summary: View changes
drubb’s picture

Having tested it, I can confirm this bug. It happens whenever the file is uploaded before entering a value for the text field.

drubb’s picture

I've done some further examinations, seems the issue is triggered by the file upload widget. To reproduce, just use the default article content type, make the body field required, add a node and as first action upload a file (image). The widget will throw an ajax 'parsererror'. This won't happen if you type something in the body field at first.

Uncaught AjaxError: 
An AJAX HTTP error occurred.
HTTP Result Code: 200
Debugging information follows.
Path: /node/add/article?element_parents=field_image/widget/0&ajax_form=1
StatusText: OK
ResponseText: 

The rest might be a subsequent error. Maybe as js expert should have a look on it, I don't know much about the underlying js architecture.

drubb’s picture

sorry, duplicate comment due to DrupalCon d.o. overload :-)

swentel’s picture

I actually think this will be automatically be fixed when #2569897: Required Long Text With Summary + form rebuild = PHP fatal error is done.

swentel’s picture

So indeed, even with #2569897: Required Long Text With Summary + form rebuild = PHP fatal error applied, there is still a problem, the console error is

"An invalid form control with name='body[0][value]' is not focusable."

Digging.

mbaynton’s picture

The console message is just telling you it can't focus a textarea hidden with css.

I bet CKeditor serializes to this textarea on submit, but that event doesn't reach CKEditor due to the html5 validation preventing form submission. Thus, the hidden textarea should never have the required attribute.

yched’s picture

I can indeed still reproduce that with #2569897: Required Long Text With Summary + form rebuild = PHP fatal error applied,
And just like that other issue, it's not specific to file uploads, any other ajax button (like the "add another value" button for a multi-valued field) has the same effect.

Investigating

yched’s picture

Title: Required Long Text With Summary + File upload = unsubmittable form » Required Long Text With Summary + form rebuild = unsubmittable form
nod_’s picture

I do see the HTML5 issue but it's because the alt text for image is required.

My bad, can reproduce

yched’s picture

Title: Required Long Text With Summary + form rebuild = unsubmittable form » Required wysiwyg field + form rebuild = unsubmittable form
Issue summary: View changes

Also, just to get it out of the way, this is not about "Long Text With Summary" field type specifically (unlike the other issue that was caused by wrong code in the "text with summary" widget). This happens on any required field leveraging CKEditor.

I updated the issue summary with more general "steps to reproduce".

Also, added a more detailed description of the changes before/after the ajax call :

Before (initial page load)

<textarea class="js-text-full text-full form-textarea required resize-vertical" data-drupal-selector="edit-field-text-0-value" id="edit-field-text-0-value" name="field_text[0][value]" rows="5" cols="60" placeholder="" aria-required="true" data-editor-active-text-format="basic_html" data-editor-required="true" style="visibility: hidden; display: none;"></textarea>

After the ajax rebuild :

<textarea class="js-text-full text-full form-textarea required resize-vertical" data-drupal-selector="edit-field-text-0-value" id="edit-field-text-0-value" name="field_text[0][value]" rows="5" cols="60" placeholder="" aria-required="true" data-editor-active-text-format="basic_html" style="visibility: hidden; display: none;" required="required"></textarea>

That is : data-editor-required="true" turned into required="required"
which then triggers client-side validation (which fails because the element is hidden)

yched’s picture

Issue summary: View changes
yched’s picture

That seems to be something around core/modules/editor/js/editor.js, and its Drupal.editorAttach behavior :

if ('required' in field.attributes) {
  field.setAttribute('data-editor-required', true);
  field.removeAttribute('required');
}

It runs on initial page load, but something seems to "undo" it after the ajax rebuild.

nod_’s picture

Status: Active » Needs review
FileSize
1.37 KB

This was a workaround because ckeditor didn't handle it properly back then.

They fixed it in 4.5.3 so it's not needed anymore.

yched’s picture

Status: Needs review » Reviewed & tested by the community

Makes sense :-)

RTBC (JS-only, not testable...)

Wim Leers’s picture

Title: Required wysiwyg field + form rebuild = unsubmittable form » Required text field with a Text Editor + AJAX form rebuild = unsubmittable form
Component: forms system » editor.module
Issue tags: +JavaScript

Wow, amazing find! So this is a funny interaction between behavior attaching/detaching and AJAXy forms. Which went unnoticed for months. Amazing.

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed c72dc29 and pushed to 8.0.x. Thanks!

  • alexpott committed c72dc29 on 8.0.x
    Issue #2571755 by nod_, yched, mbaynton, drubb, swentel: Required text...

Status: Fixed » Closed (fixed)

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