Input field executing Javascript event multiple times

Question

Javascript noob here. A bit stuck with respect to a mfa input field verification I'm trying to implement for my web app.

Instead of having the user hit the "Submit" button after they enter an mfa code in the input field, I want to simply fire my backend service when the field length reaches 6 characters. I've seen this done elegantly on a number of sites.

In my case it fires the lambdas function 4 times in a row when I click out of the field. I can't quite get my head around why it's firing 4 times, as opposed to once?

My assumption is because I'm trying to account for keyup, keypress, blur, and change simultaneously? By doing so I was trying to factor for multiple user behaviors, for example: loss of field focus, a tab out of the field, or an "enter" key press.

$("#login2fa").inputmask("9 9 9 9 9 9").on("keyup keypress blur change", function() {
    var $el = $(this);

    var code = $el.val().replace(/[^\d]/g, '');
    if (code.length === 6) {
        lambdas.userLoginMfaConfirm(session_token, code, handleConfirmResult);
    }
});

I think you are right about the reason for multiple calls. Maybe you can add the event param to your callback and log out `event.type` to confirm: https://api.jquery.com/event.type/ — Camilo, Mar 12 '21 at 02:52
@Camilo Thanks for that idea! I tried going with just keyup and that seems to have worked. It seems that's being executed before the keypress, so even if a user tries to hit enter or tab after the 6th character is input, the code is already running. So I think that's the end result I was going for. Conducting more testing to prove it out! — Parker, Mar 12 '21 at 02:56
@Parker, If you must use all the event listeners, you could also initialize a variable to check if the user login had already been called. Like `if (code.length === 6 && !sentLogin)` — a.mola, Mar 12 '21 at 03:02

score 1 · Answer 1 · answered Mar 26 '21 at 00:16

Answering my own question, thanks to a comment from @camillo!

It turns out having multiple .on functions would run the call multiple times. By adjusting the on function to only contain "keyup" it worked as intended.

$("#login2fa").inputmask("9 9 9 9 9 9").on("keyup", function() {
    var $el = $(this);

    var code = $el.val().replace(/[^\d]/g, '');
    if (code.length === 6) {
        lambdas.userLoginMfaConfirm(session_token, code, handleConfirmResult);
    }
});

Input field executing Javascript event multiple times

1 Answers1