Real Time Password Matching Checker

This jQuery snippet shows a live message while the user fills in a password and a confirm password field, so they know whether the two match before they submit the form. The check runs every time a key is released in either field.

Put the code inside your jQuery(document).ready function, so the fields exist before the event is attached. In WordPress, use jQuery(document).ready(function($) { ... }); so the $ shortcut works.

function checkPasswordMatch() {
    var password = $(".txtNewPassword").val();
    var confirmPassword = $(".txtConfirmPassword").val();

    if ((password !== "" && confirmPassword !== "") && (password != confirmPassword)) {

        $("#input_box_1578523623_field").html("<div class='erro-mix'>Passwords do not match!</div>");
    }

    if ((password !== "" && confirmPassword !== "") && (password == confirmPassword)) {

        $("#input_box_1578523623_field").html("<div class='erro-mix-g'>Passwords match!</div>");

    }
}

$(".txtNewPassword, .txtConfirmPassword").keyup(checkPasswordMatch);

How it works

• checkPasswordMatch() reads the values of the fields with the classes txtNewPassword and txtConfirmPassword. Add these classes to your two password inputs, or change the selectors.
• When both fields have a value and they differ, it prints a div with the class erro-mix and the text Passwords do not match!. When they’re equal, the class is erro-mix-g and the text is Passwords match!. Style these two classes in your CSS, for example in red and green.
• The message goes into #input_box_1578523623_field. .html() replaces everything inside that element, so point it at an empty container, not at a wrapper that holds one of the inputs.
• The last line runs the check on keyup in either field.

Things to keep in mind

If either field is empty, the function does nothing, so the previous message stays visible. Pasting with the mouse or browser autofill doesn’t fire keyup; listening to the input event as well covers those cases.

This check only helps the user. Always compare the two passwords again on the server before you create or update the account. For WooCommerce, adding a confirm password field to the registration form includes that server-side check.

Related articles

• keeping Tab from stopping on a Show password link: another fix for the same password fields
• changing the submit button’s text on click: quick feedback for the same registration form