Contrib.social

Textarea Form validation: chars max counter ignores newlines

Open on Drupal.org →
Created on 5 September 2019, about 5 years ago
Updated 16 July 2024, 4 months ago

Hello,

Experienced on Ubuntu 14.04 + Chrome Version 65.0.3325.181 (Build officiel) (64 bits).

This is my textarea component setting:

  message:
    '#type': textarea
    '#title': 'Mon message'
    '#title_display': invisible
    '#maxlength': '600'
    '#rows': '6'
    '#placeholder': 'Mon message*'
    '#required': true
    '#required_error': 'Merci de renseigner ce champ'
    '#counter_type': character
    '#counter_maximum': '600'
    '#counter_maximum_message': 'Caractère(s) restant: %d'

When I have 3 paragraphs with 600 chars, that is to say including twice two carriage returns, the server-side validation counts 604 chars and fails, whereas the counter said 600.

The form validates when I replace the 4 carriage returns by 4 simple space chars.

As a workaround, according to the jquery-text-counter plugin's API (and used in webform/js/webform.element.counter.js:55), one can set in the code stopInputAtMaximum to true and add twoCharCarriageReturn set to true. But then it bypasses html5 form control, therefore making the (Form display) maxlength webform setting useless.

Eventhough that maxlength issue seems to be an HTML specification's, this looks like a bug in webform as to user expectations.

  • On bugzilla.mozilla.org: Textarea tags with "maxlength" attributes allow too many characters to be posted when value contains hard newlines
  • On github.com/jquery-validation: Max length validation: line breaks are counted as one character, but should be counted as two in some cases

Would it be possible to give the webform admin a way to set some of the textcount() options through the GUI? Offer a higher level setting? Or to set them programmaticaly by checking the user's environment, if ever relevant?

Regards,
Arsène

🐛 Bug report
Status

Closed: works as designed

Version

5.3

Component

Code

Created by

🇫🇷France arsn

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment 4 months ago →
    🇺🇸United States abenguyen

    The snippet from Jacob (#5) worked for me on a somewhat related issue.

    Issue: Whenever the number of characters is above maximum and gets validated on the server, it returns a status error message mentioning the error that says:

    1 error has been found: FieldNameExample

    However, my specific issue is that whenever there are more characters than the maximum, and then an Ajax call is performed (e.g. by pressing "Add More" on a composite field, or uploading a File to a file field), the status error message appears inside the fieldset that the Ajax call was performed from.

    In addition, another issue is that the href anchor link appends a hash because it was returned via Ajax; therefore, it was not link to any valid id on the form.

    example:
    <a href="#edit-fieldnameexample--IuVrFwiiXZg">FieldNameExample</a>

    Ultimately, the code snippet in #5 worked for me because now newlines/breaklines are counted; and therefore, does not surpass the maximum amount. As a result, there is no server side error returned. It doesn't solve the root of the problem, which I'm not sure what approach would be the solution (writing custom hook, somehow not validating that element via #validated?).

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024