Add HTML5 "required" attributes to the login form

[aznadesign]

Hi evety one,
Today i try to login to WordPress dashboard and i knowed if i don`t write any thing in the input of username or password and then show message login error, I think if we add html5 tag "required" to the inputs of forms to validate the input labels not empty it is better for server and WordPress.
An also add feature to allow users and admins login by emails and add "type="email" required for login form.
And add feature to allow users to change admin dashboard design, like virtual menu, insert of customized code e.g #cd2122 by users
At end add stat menu to admin panel and show how many times WordPress up-time proudly, how many users, comments, plugins, alexa rank and etc
An also add Better WordPress menu that has 2 sub menu, one for security of WordPress like plugins and 2nd Performance and speed of site e.g minifity css and js and etc
Also add menu to seo features of core WordPress like add social icons to bottom of posts to allow visitor to share posts or add ​https://developers.google.com/structured-data/testing-tool/ codes to seo WordPress Sites.
This feature available by the plugins but if in core WordPress is better and faster and structure of WordPress is better.
Best regards,
Milad Shahi

[swissspidy]

The first two points are the ones relevant here:

• Add required attributes to required input fields, like in the login form
• Use input type email for the username login field (although emails aren't allowed by default)

[sanchothefat]

Adds required attributes to the login / register / forgot pass form fields as well as autofocus on first form field in each case

[afercia]

The required attribute is a boolean attribute, doesn't need a value.
​http://www.w3.org/TR/html5/forms.html#the-required-attribute

Autofocus too is a boolean attribute
​http://www.w3.org/TR/html5/forms.html#autofocusing-a-form-control:-the-autofocus-attribute
but it should be used carefully, and generally avoided. If really, really, necessary then it should be disabled for mobile devices.

See for example the discussion on autofocus on #29102.

[afercia]

Adding required to the input fields has some value, it would at least avoid to submit the form with empty fields. Something worth considering. The username field now accepts also emails so not sure what can be done here about the type attribute.

As per the other points, please do feel free to open separate tickets if still relevant. Mixing together several issues in one single ticket makes things pretty unmanageable.

[swissspidy]

The username field now accepts also emails so not sure what can be done here about the type attribute.

I think now it makes even more sense because it will change the keyboard on mobile devices accordingly.

[alexstine]

My patch adds required attribute to all fields. I suggest not adding type="email" right now as that would force HTML to validate the field for email address only and a username could not be used. The only way around this would be to add novalidate to the <form> tag which defeats the purpose of HTML5 validation.

[alexstine]

Adds required attribute to all form fields in wp-login.php.

[nant82]

Added attibute required to all mandatory inputs. Including register form, login form and password recovery form.

[sabernhardt]

refresh for spacing and attribute values

[sabernhardt]

32510.1.diff​ has a few coding standards fixes.

According to ​HTML coding Standards, attributes do need the value. (The standards document could be updated, but these inputs are self-closing for valid XHTML anyway.)

[afercia]

Related: #47595 and #47505 and the Slack conversations linked on those tickets. Specifically, the HTML5 Constraint validation API seems to be still inconsistent across browsers. Also, a good first step to take would be some research to see what the current support from assistive technologies is.

[sabernhardt]

@ryokuhi shared some old ​research into the required attribute in Slack.

Trac ticket: https://core.trac.wordpress.org/ticket/32510

[sabernhardt]

Thanks for refreshing the patch!

Additional research to consider:

• ​https://adrianroselli.com/2019/02/avoid-default-field-validation.html
• ​https://www.tpgi.com/required-attribute-requirements/

​Firefox still announces "invalid entry" before having the chance to type anything in the field, even when adding aria-invalid="false" (Firefox 112, Windows 10, NVDA 2023.1).

[joedolson]

While there are arguments against default field validation, right now we have no field validation at all. Given that this is a very simple form in an extremely standard format, I'm not sure those are a big problem.

Practically speaking, it's pretty self-evident that these fields are required, which is why they've been able to stay this way so far.

This would add an enforcing note that this is the case, so the error handling is not all that important.

Marking for commit.

Add required attributes

Trac ticket: https://core.trac.wordpress.org/ticket/32510

[joedolson]

In 55953:

Login and Registration: Add required to Username/password inputs.

Add the required attributes to username and password inputs for login.

Props aznadesign, sanchothefat, alexstine, nant82, swissspidy, afercia, d-signed, joedolson.
Fixes #32510.

Closed in r55953

Hi @audrasjb!👋🏼
Any news for a review and the test failing?

Ticket 32510 was closed in https://core.trac.wordpress.org/changeset/55953. The failing tests are timeout issues; the core tests have been having a lot of timeout failures recently, and it's not related to the PR.

[TimothyBlynJacobs]

This change ended up breaking a plugin I maintain. We provide alternative ways to login that don't utilize the main username and password fields, but utilize the login page for ease of use. The other input fields are still in the DOM, but are no longer visible and do not contain a valid value. When the form is submitted, the browser fails validation on it.

I'm reopening the ticket so we can evaluate if that is a backward incompatibility we want to avoid. Or if we are ok with that breakage. My guess is this could impact other plugins that additional login methods.

I think you could argue not removing the other input fields is #doingitwrong. We can add and remove the core input fields from the dom instead.

[alexstine]

Alternatively, simply using aria-required="true" might be enough to communicate for screen readers without true HTML5 validation until we're a little more ready. The HTML5 validation is a nice improvement though. Been playing with this on my sandbox site for a while.

Replaces required="required" with aria-required="true".

Trac ticket 32510

[joedolson]

@TimothyBlynJacobs I would argue that this is a reasonable breakage. Plugins that are manipulating login methodology should be expected to adapt to how login works, and that could absolutely include removing the fields from the DOM or removing the required attribute. In my opinion, this change is still appropriate, and any plugins that are dependent on these fields not being required should adapt.

That said, this probably means this change should come with a dev note.

I'm leaving this as reopened for the moment, but in my opinion this should be closed again as fixed.

@sabernhardt do we need to open followup ticket for signup and new user form fields?

[costdev]

I agree that this seems like acceptable breakage when accompanied with a dev note. Unused fields or required attributes should be removed if they doesn't suit a plugin's needs.