Why is the client-side validation triggered on every keypress when using the self asserted AD B2C page layout?

Question

When using the selfasserted (2.1.20) page layout the clientside validation is triggered on every key press. It seems that the setting window.SETTINGS.inputVerificationDelayTimeInMilliseconds is not used?

If I inspect the source code there is only a delay of 50ms?

                    validateData: function(n) {
                        if (n = n || "",
                        n)
                            setTimeout(function() {
                                i.validateDataAsync(n)
                            }, 50);
                        else
                            return i.validateDataAsync()
                    },	

The source code (https://login.woodgrovedemo.com/) looks different probably because an older version of the selfasserted is used?

                    validateInputWithDelay: function(n) {
                        var u = $(n)
                          , r = u.siblings("#api .error.itemLevel");
                        r !== null && r.html("");
                        clearTimeout(this._timeout);
                        this._timeout = setTimeout(function() {
                            i.isClaimValueValid(r, u.attr("id")) ? i.hideInlineError(r, u) : i.showInlineError(r, u)
                        }, t.config.inputVerificationDelayTimeInMilliseconds)
                    },

Is the delay intentionally removed? If yes, how can I implement a delay myself? Currently, when a user start typing an email address it shows an error message immediately (on the first letter).

Answer 1

Hi @Patrick van Kleef ,

Thanks for reaching out.

Yes, this is expected behavior and has been introduced in 2.1.17 page layout version.

Enabling JavaScript in Azure AD B2C page enhances the UI experience. However, it is not recommended to update window.SETTINGS, window.CONTENT objects.

As window.Settings is not storing objects in this version. You can add delay to this to introduce the delay.

Reference: https://learn.microsoft.com/en-us/azure/active-directory-b2c/javascript-and-page-layout?pivots=b2c-user-flow

Hope this will help.

Thanks,

Shweta

Please remember to "Accept Answer" if answer helped you.