diff --git a/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx b/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx
index e6f08ef6f353d..26a134ed47d72 100644
--- a/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx
+++ b/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx
@@ -34,7 +34,7 @@ import Dialog, {
 } from 'design/Dialog';
 import { Danger } from 'design/Alert';
 import FieldInput from 'shared/components/FieldInput';
-import Validation from 'shared/components/Validation';
+import Validation, { Validator } from 'shared/components/Validation';
 import {
   requiredToken,
   requiredField,
@@ -100,9 +100,16 @@ export function AddDevice({
     setMfaOption(option);
   }
 
-  function onSubmit(e: React.MouseEvent<HTMLButtonElement>) {
+  function onSubmit(
+    validator: Validator,
+    e: React.MouseEvent<HTMLButtonElement>
+  ) {
+    // Call preventDefault() before validate() to make sure the form doesn't get
+    // submitted by the browser if validation fails.
     e.preventDefault();
 
+    if (!validator.validate()) return;
+
     if (mfaOption.value === 'webauthn') {
       addWebauthnDevice(deviceName, resolvedDeviceUsage);
     }
@@ -264,7 +271,7 @@ export function AddDevice({
                 size="large"
                 width="45%"
                 type="submit"
-                onClick={e => validator.validate() && onSubmit(e)}
+                onClick={e => onSubmit(validator, e)}
                 disabled={addDeviceAttempt.status === 'processing'}
                 mr={3}
               >