Tengo una función Sweetalert2 como la siguiente:

 <script> function domIsReady(fn) { if (document.readyState === "complete" || document.readyState === "interactive") { setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } } domIsReady(function () { Swal.fire({ title: 'Login Form', html: `<input type="text" id="login" class="swal2-input" placeholder="Username"> <input type="text" id="token" class="swal2-input" placeholder="Token"> <input type="password" id="password" class="swal2-input" placeholder="Password">`, confirmButtonText: 'Sign in', focusConfirm: false, preConfirm: () => { const login = Swal.getPopup().querySelector('#login').value; const token = Swal.getPopup().querySelector('#token').value; const password = Swal.getPopup().querySelector('#password').value; if (!login) { Swal.showValidationMessage(`Please enter login UserName`); } if (!token) { Swal.showValidationMessage(`Please enter your current token number`); } if (!password) { Swal.showValidationMessage(`Please enter Password`); } return {login: login, password: password}; } }).then((result) => { Swal.fire(`Login: ${result.value.login} Password: ${result.value.password}`.trim()); }) }); </script>

Ahora, si dejo los tres valores en blanco y presiono el botón Sign in , obtengo primero el mensaje de error Please enter Password . Y si se proporciona la contraseña, obtengo Please enter your current token number y luego, finalmente, Please enter login UserName .

Pregunta 1: ¿Por qué el mensaje aparece de abajo hacia arriba? y ¿Por qué no de arriba hacia abajo?

Pregunta 2: ¿Cómo se puede revertir la apariencia del mensaje de error? ¿Para que me llegue primero el mensaje de error Please enter login UserName , luego Please enter your current token number y luego Please enter Password ?