search

userstyles-world / userstyles.world

⭐ Website to browse and share UserCSS userstyles. A modern replacement for UserStyles.org made by the userstyles community.
https://userstyles.world
GNU Affero General Public License v3.0
317 stars 14 forks source link

Character counter in text fields when adding a new userstyle #273

Closed MateusAuri closed 9 months ago

MateusAuri commented 9 months ago

Describe the change you'd like: A character counter in the text fields when adding a new userstyle, so that the user can be aware of the character limits before hitting submit (instead of just lighting up the entire field in red). Kind of like twitter does. Something like a "x/160" box in a corner.

Additional context: I was sending my first userstyle and felt a bit annoyed that it only warned me about the Description field character limit after I was done writing and tried to submit everything. Then I went back and corrected it, tried to send it again, only to be warned once again, but this time it was about the Name field. I know my issue (tiny as it may be) can be summed up to my own hastiness and inexperience with the platform, but a change like this would be an useful usability improvement for new users nonetheless.

Don't get me wrong, though, I do think that having the field light up in red is useful to tell the user that something is wrong. It only fails to inform what is wrong exactly. The message that pops up after clicking "Add userstyle" is also useful but I wish it warned me sooner.

astyled commented 9 months ago

@vednoc guess in case of JS we should invalidate the whole form/sending button instead just of one field. Not sure how to fit more advanced character count indicators here. May make use of errors appearing at failed POST.

vednoc commented 9 months ago

If one or more fields don't pass client-side validation, and we disable submit button, it will only cause more confusion. ATM, trying to submit the form will focus on the first field that's invalid and show a tooltip with an error message. I find it weird that it first focused on description field in this case. That is, if both name and description were longer than their limits. Regardless, the only other way (that I know of) to see that error message is to hover over the invalid fields. While it's definitely nice to have, usability is still bad.

We should display error messages from client-side validation in the same way as the ones from server-side validation. That way, users will be able to see what's wrong before the form is submitted.