add character count for inputs and textareas

[biskwikman]

Closes #2159

I'm not sure if this needs to also prevent the user from submitting if it's over the maxlength, as that attribute is dynamically removed.

[Changaco]

I'm not sure if this needs to also prevent the user from submitting if it's over the maxlength, as that attribute is dynamically removed.

The JavaScript code should enforce the length limit, yes. The Constraint Validation API is probably the solution.

[biskwikman]

I reformatted the code. I think it's better and the selectors are more specific. I also implemented the constraint validation api. Something I'm not sure about is how to handle an invalid input. If the field is invalid, an error message is displayed when the user attempts to submit, but this would require some more text to be translated. I'm not sure how to do that from the Javascript code. We can also refine the regex constraint pattern more if needed. Right now it should allow a string of any characters, including whitespaces, from 1 to the max length. Just typing this out I'm realizing that I need to change that so optional input fields can accept no characters.

[Changaco]

I reformatted the code. I think it's better and the selectors are more specific.

I would prefer a single code block:

$('input[maxlength], textarea[maxlength]').each(function() {
    …
    $this.on('focus input', function() {
        …
    });
});

If the field is invalid, an error message is displayed when the user attempts to submit, but this would require some more text to be translated.

Since it's a static error message, it can easily be generated server side and transmitted to the browser as an HTML attribute, e.g. <input … data-maxlength-msg="{{ _('Maximum length is {0}.', …) }}">.

We can also refine the regex constraint pattern more if needed.

Why use a regexp at all? I suggest simply checking remainingLength < 0.

[biskwikman]

I combined the code into a single block and removed the unnecessary regex.

As for the error message; will this have to be manually inserted into each instance of a relevant input or textarea element?

[Changaco]

Yes, the error message would have to be added to every relevant element.

[biskwikman]

Ok, I'll start working on that soon.

[biskwikman]

I added data-maxlength-msg="{{ _('Maximum length is {0}.', …) }}" to what I think are all of the relevant text elements. The password-form.html file also has a max length but I wasn't sure if this functionality would be appropriate there, so I didn't touch it.

There seems to be some issues when I input a string over the max length of an input field and then reload the page. For example, if you do this and then submit the form without interacting with the input fields again, it won't catch the error. I'm trying to figure out how to fix this.