Contrib.social

HTML5 Validation Prevents Submission in Tabs

Open on Drupal.org →
Created on 2 May 2018, over 6 years ago
Updated 8 February 2023, almost 2 years ago

Problem/Motivation

Form validation messages are not visible when submitting forms with invalid fields in inactive tabs.

Steps to reproduce

  1. Install Drupal with standard profile
  2. Edit form display of article content type
  3. Create a Tabs field group and two Tab field groups
  4. Place the two Tab field groups as children of the Tabs group
  5. Place the Title field inside the first Tab group
  6. Place the Body field inside the second Tab group
  7. Create a new Article node, do not populate any fields
  8. Activate the second tab, so the title field is not visible but the body field is
  9. Click Save
  10. See error in console (appears on Chrome, not Firefox)

Google Chrome will generate an error in the console, "An invalid form control with name='...' is not focusable", but nothing else happens. To a user, it would seem as the submit button doesn't work.

Proposed resolution

/**
 * @file
 * show-tab-with-error
 *
 * Prevents "not focusable" error by revealing the tab with the errors.
 */

(function ($) {
  
  Drupal.behaviors.showTabWithError = {
    attach: function (context, settings) {
      if (typeof $('<input>')[0].checkValidity == 'function') { // Check if browser supports HTML5 validation
        $('.form-submit').once('showTabWithError').on('click', function() { // Can't use .submit() because HTML validation prevents it from running
          var $this = $(this),
              $form = $this.closest('form'); // Get form of the submit button

          $form.find('[required]').each(function () {
            if (this.checkValidity && !this.checkValidity()) { // First check for details element
              var id = $(this).closest('.field-group-tab').attr('id'); // Get wrapper's id
              $('[href="#' + id + '"]').click(); // Click menu item with id
              return false; // Break loop after first error
            }
          });
        });
      }
    }
  }

})(jQuery);
🐛 Bug report
Status

RTBC

Version

3.0

Component

User interface

Created by

🇨🇦Canada Nathan Tsai

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024