'Sweetalert2 - How to get error message for first field first

I have a Sweetalert2 function like below:

<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>

Now if leave all three values blank and hit Sign in button, I get Please enter Password error message first. And if password is provided then I get Please enter your current token number and then finally Please enter login UserName.

Question1: Why the message appear bottom up? and Why not top down?

Question2: How can the appearance of error message be reversed? So that I get Please enter login UserName error message first, then Please enter your current token number and then Please enter Password ?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source