WordPress.org

Make WordPress Core

#24475 closed defect (bug) (fixed)

The empty pattern attribute causes Webkit (Chromium 25) to style the URL and Email HTML5 form fields always with :invalid styles.

Reported by: nico23 Owned by: nacin
Milestone: 3.6 Priority: normal
Severity: normal Version: 3.6
Component: Comments Keywords: dev-feedback ui-feedback ux-feedback
Focuses: Cc:

Description

Chromium Version 25.0.1364.160 Ubuntu 13.04 (25.0.1364.160-0ubuntu3)

input type="email" pattern=""
input type="url" pattern=""

This code is generated for the HTML5 form in Wordpress.

I am using bootstrap 3.0 CSS and it styles the input:focus:invalid:focus and input:focus:invalid with a red border and text. The issue is using the empty pattern variable the browsers marks everything as invalid. I simply removed the pattern="" and the validation works, the browser then uses default pattern and the styles get removed as soon as the input in that fields are valid. I not tested it with manual pattern that will of course work as well.

Not sure what the reason is you used empty pattern, I am new to this thing, but you might want to remove it or include some default pattern to be able to correctly validate the Email and URL.

Attachments (1)

24475.diff (1.7 KB) - added by markjaquith 10 months ago.
remove two instances of pattern=""

Download all attachments as: .zip

Change History (8)

comment:1 nico2311 months ago

  • Keywords ui-feedback ux-feedback added; needs-patch removed

comment:2 ocean9011 months ago

  • Milestone changed from Awaiting Review to 3.6

Introduced in [23689], see ticket:15080:29 and also #22183.

comment:3 markjaquith10 months ago

georgestephanis — was there a reason you had a blank pattern instead of just omitting the attribute?

comment:4 aaroncampbell10 months ago

Looks like there was some discussion on 15080 about the pattern attribute.

markjaquith10 months ago

remove two instances of pattern=""

comment:5 markjaquith10 months ago

Sounds like we should be good to remove it, based on the context aaroncampbell provided. See patch.

comment:6 jorbin10 months ago

I can't replicate this in Version 27.0.1453.116 or Version 30.0.1558.0 canary. That said, there is enough browser inconsistency here that bootstrap removed it from the 3.0 branch 15 days ago .

Pattern was needed because of buggy support in Opera when the patch for this was originally written (Opera 10.6). Now (as of version 11) Opera supports novalidate, so removing the blank patterns should be fine. I don't know if we have oficial versions of Opera that we support, but using the general rule of stable -1, we are safe since Opera is now on version 15.

tl;dr; I support Committing Mark's patch

comment:7 nacin10 months ago

  • Owner set to nacin
  • Resolution set to fixed
  • Status changed from new to closed

In 24573:

Remove pattern="" in the comment form (HTML5 mode) to avoid mistaken :invalid styles.

This was originally included for Opera 10, but is not needed as of Opera 11, and current is Opera 15.

props jorbin, markjaquith.
fixes #24475.

Note: See TracTickets for help on using tickets.