Adding real time validation to signup #3452
Conversation
|
Let's not do this on keyup; it creates a bit of a disruptive experience to get errors thrown at you are you're typing. Let's do this on blur instead. I checked Google, Apple, Adobe, Amazon, Spotify; none of them give feedback as you type. Also validate before the form is submitted. |
@cdrini was planning to add throttling/debouncing like we have in search, I have a few issues with blur which we can discuss on the call :) |
|
👍 Let's talk about it tomorrow! |
tabshaikh
changed the title
Co-authored-by: Christian Clauss <cclauss@me.com>
Co-authored-by: Christian Clauss <cclauss@me.com>
Co-authored-by: Christian Clauss <cclauss@me.com>
Co-authored-by: Michael E. Karpeles <michael.karpeles@gmail.com>
Co-authored-by: Michael E. Karpeles <michael.karpeles@gmail.com>
Co-authored-by: Michael E. Karpeles <michael.karpeles@gmail.com>
Co-authored-by: Michael E. Karpeles <michael.karpeles@gmail.com>
Co-authored-by: Michael E. Karpeles <michael.karpeles@gmail.com>
openlibrary/plugins/openlibrary/js/realtime_account_validation.js
Outdated
Show resolved
Hide resolved
| var value_email = $(this).val(); | ||
| if (!value_email=='') { | ||
| $.ajax({ | ||
| url: `/account/validate?email=${value_email}`, |
There was a problem hiding this comment.
We may have to urlencode + for the email. Otherwise, the API call will treat it as a space. This would means we would also have to urlencode the email on the other side.
encodeURIComponent from js (before we do the ajax request)
unquote_plus on the backend (within API)
openlibrary/plugins/openlibrary/js/realtime_account_validation.js
Outdated
Show resolved
Hide resolved
| def validate_username(username): | ||
| if not 3 <= len(username) <= 20: | ||
| return _('Username must be between 3-20 characters') | ||
| if not re.match('^[A-Za-z0-9-_]{3,20}$', username): |
There was a problem hiding this comment.
Suggestion: We should try to DRY this regex since we're now using it in 2 different places.
|
Nice! |
Issue: #3256
Closes #1433
Todo: