Validation error on customer registration page

[marcoveeneman]

Hi,

In #70 support for address autocomplete was added to the customer registration page.

We use this feature successfully in a store running Magento 2.4.3. However, we are now facing an issue when enabling the address inputs on a registration form when running Magento 2.4.5.

It appears something has changed in jquery-validation causing the input validation to fail for the postcode and house number fields on the registration page. (The checkout seems to be fine though).

The validation error is for maxlength:
maxlength: $.validator.format($.mage.__('Please enter no more than {0} characters.')),

Updating the input field even causes multiple validation errors to appear:

Stepping through the code we can see the following lines causing maxlength value to become 0 instead of undefined in Magento 2.4.5:

jquery.validate.js

attributeRules: function( element ) {
...
            for ( method in $.validator.methods ) {
...
                this.normalizeAttributeRule( rules, type, method, value ); <----- value="" at this point
            }

normalizeAttributeRule: function( rules, type, method, value ) {

            // Convert the value to a number for number inputs, and for text for backwards compability
            // allows type="date" and others to be compared as strings
            if ( /min|max|step/.test( method ) && ( type === null || /number|range|text/.test( type ) ) ) {. // <------------- method=maxlength, type=text
                value = Number( value );   // <--------------------------- This line is converting "" (empty string) to 0

                // Support Opera Mini, which returns NaN for undefined minlength
                if ( isNaN( value ) ) {
                    value = undefined;
                }
            }

            if ( value || value === 0 ) {
                rules[ method ] = value;    // <---------- rules[maxlength]=0 is set here, causing validation to fail on empty maxlength attribute
            } else if ( type === method && type !== "range" ) {

                // Exception: the jquery validate 'range' method
                // does not test for the html5 'range' type
                rules[ type === "date" ? "dateISO" : method ] = true;
            }
        },

In Magento 2.4.3, an older version of jquery.validate.js is used:

        attributeRules: function (element) {
...
            for (var method in $.validator.methods) {
...
                if (value) {       // <------ value="", rules[maxlength] will not be set.
                    rules[method] = value;
                } else if ($element[0].getAttribute("type") === method) {
                    rules[method] = true;
                }
            }

I checked what happens when setting the maxlength attribute to a value in customer_address_autofill.xml:

                                        <item name="children" xsi:type="array">
                                            <item name="postcode" xsi:type="array">
                                                <item name="component" xsi:type="string">Flekto_Postcode/js/form/element/postcode</item>
                                                <item name="label" translate="true" xsi:type="string">Zip/Postal Code</item>
                                                <item name="config" xsi:type="array">
                                                    <item name="template" xsi:type="string">ui/form/field</item>
                                                    <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                                                    <item name="visible" xsi:type="boolean">true</item>
                                                    <item name="placeholder" xsi:type="string">1234 AB</item>
                                                </item>
                                                <item name="additionalClasses" xsi:type="string">address-autofill-nl-postcode</item>
                                                <item name="maxlength" xsi:type="number">255</item> <!-- This 'fixes' the validation error -->

This seems to fix the validation error because now a maxlength of 255 is used. I think i can work with this now but i'm not sure i like this solution.

Postcode html:

Housenumber html:

I wonder if the maxlength validation can be removed altogether to prevent the validation error as seen in the screenshot, other fields on the registration page are also lacking the maxlength attribute.

Is anyone else having this same problem? What would be the recommended way to solve it? Hoping this will be fixed in the module at some point :)

[marcoveeneman]

Quick update:

It looks like the maxlength attribute is removed by using the following line in the customer_address_autofill.xml file:

                                                <item name="maxlength" xsi:type="boolean">false</item> 

Instead of setting the maxlength to a number, we set to to boolean false.

The resulting html:

[JerrySmidt]

I looked into it but wasn't able to reproduce the issue on Magento 2.4.7. There's no maxlength attribute on the fields, so it could be fixed in Magento already.

Setting maxlength to a reasonable number or removing the attribute are both proper solutions.