Page MenuHomePhabricator

Account creation form should prevent submission of form if required fields are empty
Closed, ResolvedPublic

Description

In the account creation form the user must write the new username, the password (twice), and the CAPTCHA (the email address is not required). All of these are required, and if the form is submitted without any of them, it is reloaded and the fields that were already filled, must be filled again.

The "Go" key that exists on mobile phone touch keyboards submits the form even if the required fields aren't full yet. I saw people creating accounts and repeatedly tapping this key and getting their forms erased, and having to type the passwords, the email address, or the CAPTCHA yet again. This makes the process very confusing and frustrating.

~~To work around this, it's possible to tap the fields themselves one by one, but I know this because I'm an advanced user, and the account creation form is much more likely to be shown to new users, who may prefer tapping the "Go" key.

The key should probably move the focus to the next required field instead of submitting the form. Also, not deleting the values of sensibly filled fields would be great.~~

  • Add required attributes to all input fields in the account creation form (in core) that are required.

Event Timeline

Amire80 created this task.Jan 6 2017, 10:58 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 6 2017, 10:58 AM
Jdlrobson added a subscriber: Jdlrobson.

The account creation form on mobile is exactly the same code as desktop.
To be clear.. I'm not seeing a "Go" button.. do you mean the "Create account" button? (maybe Go in another language version?)

But, if I'm not mistaken this is also an issue in https://en.wikipedia.org/wiki/Special:CreateAccount (just more noticeable on a mobile browser) (If so should we remove MobileFrontend and tag Mobile)?

Amire80 renamed this task from In MobileFrontend account creation form the "Go" button in mobile touch keyboards must not submit the form if the required fields aren't full to In MobileFrontend account creation form the "Go" key on mobile touch keyboards must not submit the form if the required fields aren't full.Jan 9 2017, 3:24 PM
Amire80 updated the task description. (Show Details)

Sorry, I should have been clearer. It's not a button that appears in the website's interface, but a key in the mobile keyboard itself. I edited the task description.

It's at the bottom right corner of this screenshot:

It can have other names if the phone's UI language is not English; I set mine to English especially to make the screenshot :)

Jdlrobson edited projects, added Mobile; removed MobileFrontend.Jan 10 2017, 12:32 AM
Jdlrobson added a subscriber: Volker_E.

When you hit go it is the same as hitting "create account" so yes the issue is also a problem with desktop - just more painfully experienced on mobile.
A really trivial move would be to add required attributes to all required fields. I'm surprised this hasn't been done already (most mobile browsers will then do validation for you)
@Volker_E what do you think?

I don't see any reason why we wouldn't add required attributes where they apply.

Jdlrobson renamed this task from In MobileFrontend account creation form the "Go" key on mobile touch keyboards must not submit the form if the required fields aren't full to Account creation form should prevent submission of form if fields are required.Jan 25 2017, 7:30 PM
Jdlrobson renamed this task from Account creation form should prevent submission of form if fields are required to Account creation form should prevent submission of form if required fields are empty.
Jdlrobson added a project: good first task.
Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptJan 25 2017, 7:31 PM
ovasileva triaged this task as High priority.Jan 25 2017, 7:32 PM
Jdlrobson updated the task description. (Show Details)Jan 25 2017, 7:33 PM
DatGuy added a subscriber: DatGuy.Jan 25 2017, 7:37 PM

Jdlrobson some clarification requested since you added the Easy tag. All that needs to be done is that

if (strlen($pass||username||confirmuserpass) == 0 {
  echo "One of the requires fields are empty";
  break;
}

Any comments?

@DatGuy even more simple... a required attribute would be added to the required fields where they are generated.
e.g.

<input required name="captcha" />

Note that we already have server side validation - the goal is to prevent the user from submitting a form that is not complete.

@Jdlrobson One thing we need to assure is, to hide asterisks on those specific fields when we're invoking required.

Wait.. I'm seeing required fields and when I try to sign up in mobile it now prompts me to fill in required fields. Did something change / a patch get merged?

Maybe T155640 can shed some light. Is this fixed?

I think @matmarex may have already fixed this with Ia7ffa76965a7c14af9b6d2db007b6255498398d9

matmarex closed this task as Resolved.Jan 25 2017, 10:28 PM
matmarex claimed this task.

Yes, although the actual fix is not Ia7ffa76965a7c14af9b6d2db007b6255498398d9 (https://gerrit.wikimedia.org/r/#/c/324951/), but the next related change, I08244addcf9b6eb96137895f28e7b750914fef5c (https://gerrit.wikimedia.org/r/#/c/323408/). A lot of our code (including the HTMLForm library, used to build the login page among other things) was already set up to use the required attribute for required form fields, but they were blacklisted in the Html library (because in 2010, when this was done, browsers were just starting to support HTML form validation attributes like required and some were unacceptably buggy).

In the account creation form the user must write the new username, the password (twice), and the CAPTCHA (the email address is not required). All of these are required, and if the form is submitted without any of them, it is reloaded and the fields that were already filled, must be filled again.

The password (and confirmation) are cleared from output intentionally: "don't put passwords into the HTML body, they could get cached or otherwise leaked" (quoting the comment by the code that controls this behavior, HTMLTextField::isPersistent()). I think this is a commonly accepted good practice (although I've seen some sites not do it, so perhaps not).

The captcha text is cleared because you'll need to enter a new captcha if the submission fails. This is suboptimal of course, perhaps we should remember that the user filed in a captcha correctly once and not ask them again for some time (but there has to be a limit, otherwise the captcha's protection against bots is lost). But that would be a separate task.

All other fields (username and email) are preserved on a failed submission, as far as I can see.