The module uses a HTML attribute of maxlength_js_label, which is not valid.

In HTML5 you could use data- prefixed attributes, but that doesn't help for non-HTML5 sites.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Loparev’s picture

Issue summary: View changes
FileSize
1.76 KB

Hi. I ran into this problem to. I hope, this patch will be useful for those guys who respect html5 markup standards.

Loparev’s picture

Assigned: Unassigned » Loparev
Status: Active » Needs review
BR0kEN’s picture

+++ b/js/maxlength.js
@@ -19,7 +19,7 @@
+        options['counterText'] = $(this).attr('data-maxlength_js_label');

Why not $(this).data('maxlength_js_label')?

Loparev’s picture

@BR0kEN because:
1. Custom attributes should be named like 'data-custom-attribute-name'.
2. To get first point I have changed all maxlength_js_label attributes to data-maxlength_js_label. So from js this label string available in data-maxlength_js_label attribute

Loparev’s picture

Sorry, your question was about attr() and data() methods.

I used attr() instead of data() because data-maxlength_js_label value is permanent and it will never changed by calling data('data-maxlength_js_label', 'some-new-value'), so $(this).attr('data-maxlength_js_label') will always return actual value.

BR0kEN’s picture

@Loparev, the data() method works as getter and setter. If value never changed, then it will return actual value too.

Loparev’s picture

@BR0kEN, I know it.

Difference beetween data() and attr() methods:

<div id="test" data-test="test"></div>
console.log($('#id').attr('data-test')); // test
console.log($('#id').data('test')); // test
$('#id').data('test', 'edited-test');
console.log($('#id').attr('data-test')); // test
console.log($('#id').data('test')); // edited-test

So in my case it is not important: use data() or attr(), because value will never changed.

By the way, attr() was in original maxlength.js file. So it is second reason why I used attr() method.

BR0kEN’s picture

I know it too, @Loparev.

But data() designed to work with data-* attributes and it is logical. Take your code, replace $('#id').data('test', 'edited-test'); by $('#id').attr('data-test', 'edited-test'); and you've get another result.

P.S. Doesn't matter that you'll found in a module's code: you need trying to find the best approaches and doesn't think that legacy code is pretty and untouchable. But it is your patch, your thread, your decision, your approach, and all these up on you.

rooby’s picture

In this case I think either attr() or data() is fine.

A lot of people use attr() for simple string data that is pre-existing on the DOM and data() for more complex data or data that isn't already on the DOM when the page loads.

Loparev’s picture

@rooby, could you please review and test this patch?

rooby’s picture

I'm just about to go to sleep now but I should be able to test it in the next day or two.

Loparev’s picture

sure, sorry. I meant in nearest future

frjo’s picture

Title: maxlength_js_label attribute is not valid HTML » maxlength_js_label attribute is not valid HTML, class names have underscores
FileSize
4.6 KB

Updated the patch so it apply cleanly on 7.x-3.x, uses data() instead of attr() and also fixes class names by replacing underscores with hyphen.

cedewey’s picture

Status: Needs review » Closed (won't fix)

We are only maintaining the Drupal 7 version of the module for critical security fixes, so I'm marking this Closed (won't fix). Thank you for working on this issue. If you do want to maintain the Drupal 7 version, do reach out. We'd be happy to bring you on board as a maintainer.

I also encourage you, if you haven't already, to upgrade your site to Drupal 8/9. We are actively maintaining that version and you would enjoy all of the other features of the latest version of Drupal.