[WMDE-Fundraising] Allow for validated, templated, multi-step forms
Closed, ResolvedPublic15 Story Points

Description

For the presentation layer of the "Add Donation" use case it must be possible to collect the data in a multi-step browser form.

At the moment, the form works like this:
1st form: Set payment options
2nd form: Enter personal data (also dependent on the payment options set, some allow anonymous donations).
3rd form: If payment type is direct debit (Lastschrift), ask for permission, otherwise skip this form.

The posted data is validated and stored between each step, the user can only continue to the next step, if the data is valid. The final processing of the form data (storing the donation, sending mails, contacting the payment provider) happens after all form steps have been completed.

In the old application the "temporary storage" of field values between form steps happens in hidden form fields, which kind of breaks the browser back button: the user gets the "do you want to resend the form values" dialog of the browser when he clicks the browser "Back" button.
In the new application we will use client-side scripting to send parts of the form to validation endpoints and to display and hide the the form steps.

gabriel-wmde updated the task description. (Show Details)
gabriel-wmde raised the priority of this task from to Normal.
gabriel-wmde claimed this task.

@kai.nissen,@JeroenDeDauw: I'll start implementing this, any thoughts and comments are appreciated.

gabriel-wmde set Security to None.Feb 15 2016, 1:37 PM
gabriel-wmde edited a custom field.
gabriel-wmde updated the task description. (Show Details)Feb 15 2016, 2:46 PM

@kai.nissen, @gabriel-wmde and @JeroenDeDauw discussed another alternative where each form step is a separate page, the steps are changed with individual form submits and the data gets stored in hidden fields (a 1:1 reproduction of the current application). However, this would be more complicated than converting the form to a purely client-side solution since we'd then have to somehow configure "Validation profiles" (different combinations of validators for the different form steps representing different parts of a donation object) on the client side and would have to store the partial results in hidden fields.

JeroenDeDauw added a comment.EditedFeb 16 2016, 9:28 PM

The approach where only a single write is done to the server after all required info is there seems both simpler and easier, so I'm all for it if that gets us the functionality we want.

Does this effect the AddComent usecase?

List of needed validation endpoints: https://phabricator.wikimedia.org/T127001

This does not affect the AddComment use case since that takes place after the donation was stored (after the Add Donation use case is finished).

gabriel-wmde renamed this task from Allow for validated, templated, multi-step forms to [WMDE-Fundraising] Allow for validated, templated, multi-step forms.Mar 4 2016, 12:21 PM

Validation Architecture and validation for first form page are in https://github.com/wmde/FundraisingFrontend/pull/232

gabriel-wmde added a comment.EditedMar 18 2016, 4:47 PM

what's still missing in the current code (as of 2016-03-8):

  • Remove content from hidden fields ("rules" in the form-content reducer)
  • Bank data validation: Move from old javascript to new to store bank data validation result in global state
  • Address validation
  • More flexible validation "triggers": Amount and bank data validation should happen in the background. Address validation should only happen when all the necessary fields are filled in. Optional validation on button click (or "NEXT_PAGE" action).
  • SEPA confirmation page
Restricted Application added a project: WMDE-Fun-Team. · View Herald TranscriptApr 7 2017, 11:26 AM
Tobi_WMDE_SW closed this task as Resolved.Apr 7 2017, 11:26 AM