Fields with HTML5 form validation constraints break post save UI

[westonruter]

Consider a metabox added to the edit post screen which includes fields that utilize HTML5 form validation constraints (by supplying a specific type attribute or the required or pattern attributes). Normally upon hitting the Publish or Save Draft button, the buttons go disabled and a spinner appears until the page reloads. However, if any of the metabox input fields violate the HTML5 form validation constraints, then upon hitting a submit button the browser will display the native validation error messages, but the Save Draft and Publish buttons will still go into their disable state and the spinner will appear, even though the submit event never fired. This unfortunately discourages the use of HTML5 form validation and forces plugin authors to include a formnovalidate attribute on such input fields. Attached is a patch that allows input fields to use HTML5 form validation constraints and which prevents the UI from going into an an indeterminate/broken state. See attached screenshot for a depiction of the issue.

[westonruter]

Screenshot of issue

[westonruter]

Test metabox with HTML5 form validation

[westonruter]

Commit pushed to branch on GitHub fork:
​https://github.com/x-team/WordPress/tree/23362
​https://github.com/x-team/WordPress/commit/e5724d6abc01ee72098e98cefdf0dd566e2accb0

[rmccue]

Replying to westonruter:

Commit pushed to branch on GitHub fork

Protip: ​append .diff to a commit URL to get it as a (git-style) patch. Note that this has a/ and b/ in the paths though, and there's no way I know of to get GitHub to give a no-prefix patch.

[azaozz]

This is a "cosmetic" error as the Save Draft/Publish buttons are not actually disabled until form.submit. They appear disabled because of the button-disabled class added onclick but clicking them will submit the form.

Agree that this is quite confusing when the form submission is prevented. Not sure we ever need the button-disabled class in this case, think it's a left-over from IE6 that didn't support styling of disabled buttons if I remember correctly.

Moving to the Autosave component as this is directly related.

[nacin]

Not a regression, let's deal with this along with #25272 in early 3.8.

[azaozz]

This is fixed in the autosave patch on #25272, setting to 3.9-early as well.

[azaozz]

Should be fixed in [26995].