diff --git a/static/js/dialog_widget.js b/static/js/dialog_widget.js
index 7df8f4f2a3..c16b0517cd 100644
--- a/static/js/dialog_widget.js
+++ b/static/js/dialog_widget.js
@@ -81,6 +81,7 @@ export function launch(conf) {
     // * id: Custom id to the container element to modify styles.
     // * single_footer_button: If true, don't include the "Cancel" button.
     // * form_id: Id of the form element in the modal if it exists.
+    // * validate_input: Function to validate the input of the modal.
     // * on_show: Callback to run when the modal is triggered to show.
     // * on_shown: Callback to run when the modal is shown.
     // * on_hide: Callback to run when the modal is triggered to hide.
@@ -125,6 +126,9 @@ export function launch(conf) {
 
     // Set up handlers.
     submit_button.on("click", (e) => {
+        if (conf.validate_input && !conf.validate_input(e)) {
+            return;
+        }
         if (conf.loading_spinner) {
             show_dialog_spinner();
         } else if (conf.close_on_submit) {
diff --git a/static/js/settings_account.js b/static/js/settings_account.js
index 6de16bb7a2..1756a06c07 100644
--- a/static/js/settings_account.js
+++ b/static/js/settings_account.js
@@ -436,6 +436,33 @@ export function set_up() {
     $("#change_password").on("click", async (e) => {
         e.preventDefault();
         e.stopPropagation();
+
+        function validate_input(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            const old_password = $("#old_password").val();
+            const new_password = $("#new_password").val();
+
+            if (old_password === "") {
+                ui_report.error(
+                    $t_html({defaultMessage: "Please enter your password"}),
+                    undefined,
+                    $("#dialog_error"),
+                );
+                return false;
+            }
+
+            if (new_password === "") {
+                ui_report.error(
+                    $t_html({defaultMessage: "Please choose a new password"}),
+                    undefined,
+                    $("#dialog_error"),
+                );
+                return false;
+            }
+            return true;
+        }
+
         dialog_widget.launch({
             html_heading: $t_html({defaultMessage: "Change password"}),
             html_body: render_dialog_change_password(),
@@ -445,6 +472,7 @@ export function set_up() {
             form_id: "change_password_container",
             post_render: change_password_post_render,
             on_click: do_change_password,
+            validate_input,
         });
         $("#pw_change_controls").show();
         if (page_params.realm_password_auth_enabled !== false) {
@@ -466,22 +494,6 @@ export function set_up() {
             new_password: $("#new_password").val(),
         };
 
-        function show_error_message(rendered_error_msg) {
-            change_password_error.html(rendered_error_msg);
-            change_password_error.addClass("alert-error").show();
-            dialog_widget.hide_dialog_spinner();
-        }
-
-        if (data.old_password === "") {
-            show_error_message($t_html({defaultMessage: "Please enter your password"}));
-            return;
-        }
-
-        if (data.new_password === "") {
-            show_error_message($t_html({defaultMessage: "Please choose a new password"}));
-            return;
-        }
-
         const new_pw_field = $("#new_password");
         const new_pw = data.new_password;
         if (new_pw !== "") {