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
?