Tengo un formulario con un botón de enviar. No puedo cambiarlo y nada sobre el html.

 <form> <input type="text" class="form-control" id="username" required /> <label for="username">Username</label> <input type="password" class="form-control" id="password" required /> <label for="password">Password</label> <button id="submit" class="btn btn-lg" type="submit">Sign in</button> <form></form> </form>

Este es mi js:

 let nombre = document.getElementById("username").value; let pass = document.getElementById("password").value; async function login() { try { const response = await fetch("http://localhost:8888/login", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ username: nombre, password: pass }), }); if (response.status !== 200) throw response.statusText; const content = await response.json(); return content; } catch (error) { console.log("Errorr:" + error); } } function submit() { let validacion1 = document.getElementById("username").checkValidity(); let validacion2 = document.getElementById("pass").checkValidity(); if (validacion1 == true && validacion2 == true) { login(); } } document.getElementById("submit").addEventListener("click", submit);

Pero si hago clic en el botón Enviar, la página se "recarga" y no puedo iniciar sesión correctamente.

Debo hacer clic en el botón Enviar y esperar a que el nombre de usuario y la contraseña sean correctos.

¿Cómo puedo hacer clic en el botón Enviar y no recargar instantáneamente la página?

Muchas gracias