| kai.nissen | |
| May 28 2018, 9:59 AM |
| F18746254: bank-data-form-valid-case.png | |
| Jun 4 2018, 3:57 PM |
| F18746253: bank-data-form-error-case.png | |
| Jun 4 2018, 3:57 PM |
| F18280909: image.png | |
| May 28 2018, 9:59 AM |
| F18280878: image.png | |
| May 28 2018, 9:59 AM |
| F18280944: image.png | |
| May 28 2018, 9:59 AM |
Description taken from T182298.
IBAN cases
Account number case
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | None | T188400 Follow up on skin integration | |||
| Resolved | None | T182298 Consolidate bank account fields | |||
| Resolved | None | T195749 Create a prototype for combined bank data fields |
new repo: https://github.com/wmde/fundraising-bankdata-prototype
prototype available at: https://wmde.github.io/fundraising-bankdata-prototype/
Pretty cool that the prototype got running that quickly! If it's not too much work, maybe try and change the behavior of the BIC field in combination with a German IBAN so that it only adds a value in the BIC field when the user is done typing the IBAN (which is the case at 22 characters for German IBANs). This should more closely reflect the behavior of a later implementation, as the BIC would only be determined after the user has finished typing. You can then also 'extract' the BIC from the IBAN by simply skipping the first four characters from the IBAN and reading the next eight characters if you want the prototype to be even more accurate.
I was also thinking that it may make sense if the text changes from "BIC" to something like "BIC will be filled in automatically" while the user is typing a German IBAN so that they are not confused as to why the input field is disabled, but that's more of a thought for UX.
You can then also 'extract' the BIC from the IBAN by simply skipping the first four characters from the IBAN and reading the next eight characters if you want the prototype to be even more accurate.
Thanks for the life hack!
change the behavior of the BIC field in combination with a German IBAN so that it only adds a value in the BIC field when the user is done typing the IBAN
I thought about doing this initially, but if I had to make it work in vue.js (v-model binding to the input value of IBAN field) that meant the placeholder would also only change after user is done typing, which is not the desired behavior.
But I think you're right, it's definitely closer to the supposed real implementation, therefor I made it work in an ugly way (nested ifs).
Thank you for setting this up that quickly!
I'd like to request some changes:
When entering 'DE' into the IBAN field, the label of the BIC field vanishes. It should be kept until the client-side code updates it with a BIC.
Addressed.
The action to validate and automatically set the BIC value should be triggered when leaving the field rather than depending on the length of the entered value.
Addressed.
The value that is embedded into German IBANs is actually the bank code (Bankleitzahl), not the BIC. I think, we can hard-code an IBAN/BIC pair to be used during user tests.
ooops :) I hardcoded Deutschebank's BIC to be returned for every IBAN starting with DE. Hope that's ok for now.
The fields should display their validity indication. If possible, the error message should appear when entering wrong data.
This is the tricky part. We don't have server side for the prototype. I have no knowledge of all the magic that validates the IBAN. I can add some basic validation like IBAN being 22 characters long and starting with capital letters. Would that be okay?
What else can be validated?
You can find example data for bank account data here: https://ssl.ibanrechner.de/sample_accounts.html?&L=0
As just discussed during the Daily, there shouldn't be any validation, only validity indication for hard-coded example data.
@kai.nissen Ok, changes are applied. I hope I correctly understood everything.
I hardcoded DE00123456789012345678 and DEUTDEBBXXX as IBAN/BIC combination. Should work with their respective Kontonummer/Bankleitzahl.
Thanks for addressing my comments. In general, this looks fine. The validity indication does not behave as expected, though. I attached some screenshots to illustrate.
Valid case:
Invalid case:
Hardcoded values:
IBAN = DE00123456789012345678
BIC = DEUTDEBBXXX
Kontonummer = 9012345678
Bankleitzahl = 12345678