Make WordPress Core

Opened 11 years ago

Closed 10 years ago

#23362 closed enhancement (fixed)

Fields with HTML5 form validation constraints break post save UI

Reported by: westonruter's profile westonruter Owned by:
Milestone: 3.9 Priority: normal
Severity: minor Version: 3.5
Component: Autosave Keywords: has-patch 3.9-early
Focuses: Cc:

Description

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.

Attachments (3)

broken html5 form validation in metabox field.png (37.5 KB) - added by westonruter 11 years ago.
Screenshot of issue
23362.diff (1.4 KB) - added by westonruter 11 years ago.
metabox-with-html5-validity-constraints.php (515 bytes) - added by westonruter 11 years ago.
Test metabox with HTML5 form validation

Download all attachments as: .zip

Change History (15)

@westonruter
11 years ago

#1 @westonruter
11 years ago

  • Summary changed from HTML5 form validation breaks post save UI to Fields with HTML5 form validation constraints break post save UI

#2 @westonruter
11 years ago

  • Cc westonruter@… added

#3 @SergeyBiryukov
11 years ago

  • Milestone changed from Awaiting Review to 3.6
  • Version changed from trunk to 3.5

#4 @ryan
11 years ago

  • Milestone changed from 3.6 to Future Release

@westonruter
11 years ago

Test metabox with HTML5 form validation

#6 in reply to: ↑ 5 @rmccue
11 years ago

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.

#7 @fjarrett
11 years ago

  • Cc fjarrett@… added

#8 @azaozz
11 years ago

  • Component changed from Validation to Autosave
  • Milestone changed from Future Release to 3.7

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.

#9 @nacin
11 years ago

  • Keywords early added
  • Milestone changed from 3.7 to 3.8

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

#10 @azaozz
10 years ago

  • Milestone changed from 3.8 to Future Release

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

#11 @SergeyBiryukov
10 years ago

  • Keywords 3.9-early added; early removed

#12 @azaozz
10 years ago

  • Milestone changed from Future Release to 3.9
  • Resolution set to fixed
  • Status changed from new to closed

Should be fixed in [26995].

Note: See TracTickets for help on using tickets.