Show tab with empty HTML5 required input on form submit

[Toutouwai]

Short description of the enhancement

It would be cool if PW enhanced its support of HTML5 required inputs. I'm thinking primarily of ProcessPageEdit here but perhaps there could be other applications too.

Currently if there is an empty input with the HTML5 required attribute on a tab that isn't currently active then the Page Edit form cannot be submitted but there is no feedback to the user, and Chrome gives the following error in the console:

An invalid form control with name='field_name' is not focusable.

I know there is a note in the field settings advising that the HTML5 required attribute should only be used on fields that are always visible to the user, but I think there is an opportunity to support required fields on inactive tabs.

My idea is that PW should respond to the "invalid" event for inputs and show the WireTab the invalid field is on, so the notice is visible to the user.

I've been doing some experimenting and this nearly works...

$(function() {
    $(':input[required]').on('invalid', function () {
        var $tab_content = $(this).parents('.Inputfield').last();
        var $tab = $('#PageEditTabs').find('#_' + $tab_content.attr('id'));
        $tab.click();
    });
});

...the only catch being that the top submit button also triggers a click() which prevents a simultaneous WireTab click().

So a workaround is to add a slight delay to the WireTab click(), but show the tab content immediately so that the required field can be focused and the notice displayed:

$(function() {
    $(':input[required]').on('invalid', function () {
        var $tab_content = $(this).parents('.Inputfield').last();
        var $tab = $('#PageEditTabs').find('#_' + $tab_content.attr('id'));
        $tab_content.show();
        setTimeout(function() {
            $tab.click();
        }, 25);
    });
});

Of course if there are multiple empty required fields on multiple tabs then these cannot all be shown simultaneously but the user can work through them on subsequent attempted submits.

Why would the enhancement be useful to users?

The immediate feedback that the browser provides without needing to wait for a server response is arguably a better experience for the user.

More ideas

There could be an option in the field settings to specify a custom notice per field.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Customized_error_messages

The "required if" JS could be updated to dynamically add/remove the required attribute, to support HTML5 required in "required if" scenarios also.

[Toutouwai]

Update to un-collapse a collapsed required field if empty:

$(function() {
    $(':input[required]').on('invalid', function () {
        var $inputfield_ancestors = $(this).parents('.Inputfield');
        var $inputfield_wrap = $inputfield_ancestors.first();
        var $tab_content = $inputfield_ancestors.last();
        var $tab = $('#PageEditTabs').find('#_' + $tab_content.attr('id'));
        $inputfield_wrap.removeClass('InputfieldStateCollapsed');
        $tab_content.show();
        setTimeout(function() {
            $tab.click();
        }, 25);
    });
});

[rolandtoth]

Or perhaps just show a (styled?) alert with field and tab name? That would avoid the issue with long tabs where the field is below the fold and scroll would be necessary. Of course scrollIntoView() could help, though sticky headers and such could still cause troubles.

[ryancramerdesign]

Thanks @Toutouwai I have added this. I used your suggestion as the starting point and continued from there. Now in addition to tabs, it handles revealing any collapsed parents too (like fieldsets). I put it behind a JS API function InputfieldFocus($inputfield) which finds and reveals the Inputfield wherever it is, opens any collapsed parents or tabs, and then focuses the input within it, when appropriate.

[Toutouwai]

Thanks Ryan, just tried it and it's working great!