How to setTimeout in form Submit? If there is such a thing

Question

I have the following code and would like to know how to após o click no button enviar display the message Login performed successfully! and after 3 seconds the form is sent:

function validarLogin(strLogin,strSenha) {

        if(strLogin == "") { 
            document.getElementById('login').style.borderColor = "red";
            document.frmLogin.txtLogin.focus();
            document.getElementById('strong1').style.display = "block";
            document.getElementById('sucesso').style.visibility = "hidden";
            return false;
        }
        else if(strSenha == "") { 
            document.getElementById('senha').style.borderColor = "red";
            document.frmLogin.txtSenha.focus();
            document.getElementById('strong2').style.display = "block";
            document.getElementById('sucesso').style.visibility = "hidden";
            return false;
        }
        else { 
            document.getElementById('sucesso').style.visibility = "visible";
            return true;
        }   
                                                        
    }                                                           

    function input1() {
        var strLogin = document.getElementById('login').value; 
        if(strLogin !== "") {
            document.getElementById('strong1').style.display = "none";
            document.getElementById('login').style.borderColor = "green";
        } 
        else {
            return false;
        }
    }

    function input2() {
        var strSenha = document.getElementById('senha').value;
        if(strSenha !== "") {
            document.getElementById('strong2').style.display = "none";
            document.getElementById('senha').style.borderColor = "green";
        }
        else {
            return false;
        }
    }

    function delay() {
        var form = document.getElementById('form');
        form.submit();
        return validarLogin();
    }

    function forml() {
        var form = document.getElementById('form');
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            setTimeout(delay, 2000);
        }); 
    }

#box {
        background-color: #28B2A1;
        padding: 10px;
        border-radius: 6px; 
        margin-top: 25%;
    }
    strong {
       display: none;
       color: red; 
    }
    .btn {
        margin: 0 auto;
    }
    #sucesso {
        visibility: hidden;
        color: #28B2A1;
        background-color: #fff;
        padding: 10px;
        border-radius: 6px;        
    }
    samp{
        font-weight: bolder;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="row justify-content-center">
            <div class="col-md-4 col-xs-12" id="box">
                <h4 class="text-center" id="sucesso">Login realizado com sucesso!</h4>
                <form name="frmLogin" id="form" action="validar_login_js.html" method="post" onsubmit="return validarLogin(txtLogin.value,txtSenha.value);">
                    <samp><label for="login">LOGIN</label></samp>
                    <input type="text" class="form-control" id="login" name="txtLogin" value="Fulano" onfocus="this.value='';" onblur="input1()">
                    <strong id="strong1">Preencha corretamente o campo Login!</strong id="strong1"><br>
                    <samp><label for="senha">SENHA</label></samp>
                    <input type="password" class="form-control" id="senha" name="txtSenha" value="123456" onfocus="this.value='';" onblur="input2()">
                    <strong id="strong2">Preencha corretamente o campo Senha!</strong><br><br>       
                    <p class="text-center"><input type="submit" class="btn btn-warning" name="btnEnviar" value="Enviar" id="enviar">&nbsp;&nbsp;&nbsp;<input type="reset" class="btn btn-secondary" name="btnLimpar" value="Resetar"></p>
                </form>
            </div>
        </div>
    </div>

Answer 1

First you have to call the function forml() that activates the addEventListener page loading. Also the function is not required delay(), since you can do everything at the event:

(function forml() {
  var form = document.getElementById('form');
  form.addEventListener('submit', function(e) {
      e.preventDefault();
      var form = document.getElementById('form');
      var txtLogin = document.getElementById('login').value;
      var txtSenha = document.getElementById('senha').value;
      if(validarLogin(txtLogin,txtSenha)) setTimeout("form.submit()", 3000);
  }); 
}())

Change the value of setTimeout from 2000 to 3000 (3 seconds).

You also have to send the parameters the same way you are doing on onsubmit of form to return the validation, as shown in the code snippet:

...
var txtLogin = document.getElementById('login').value;
var txtSenha = document.getElementById('senha').value;
if(validarLogin(txtLogin,txtSenha)) setTimeout("form.submit()", 3000);
...

So it will only submit the form if the function returns validarLogin be it true.

Let’s see it working:

function validarLogin(strLogin,strSenha) {

        if(strLogin == "") { 
            document.getElementById('login').style.borderColor = "red";
            document.frmLogin.txtLogin.focus();
            document.getElementById('strong1').style.display = "block";
            document.getElementById('sucesso').style.visibility = "hidden";
            return false;
        }
        else if(strSenha == "") { 
            document.getElementById('senha').style.borderColor = "red";
            document.frmLogin.txtSenha.focus();
            document.getElementById('strong2').style.display = "block";
            document.getElementById('sucesso').style.visibility = "hidden";
            return false;
        }
        else { 
            document.getElementById('sucesso').style.visibility = "visible";
            return true;
        }   
                                                        
    }                                                           

    function input1() {
        var strLogin = document.getElementById('login').value; 
        if(strLogin !== "") {
            document.getElementById('strong1').style.display = "none";
            document.getElementById('login').style.borderColor = "green";
        } 
        else {
            return false;
        }
    }

    function input2() {
        var strSenha = document.getElementById('senha').value;
        if(strSenha !== "") {
            document.getElementById('strong2').style.display = "none";
            document.getElementById('senha').style.borderColor = "green";
        }
        else {
            return false;
        }
    }

   (function forml() {
     var form = document.getElementById('form');
     form.addEventListener('submit', function(e) {
         e.preventDefault();
         var form = document.getElementById('form');
         var txtLogin = document.getElementById('login').value;
         var txtSenha = document.getElementById('senha').value;
         if(validarLogin(txtLogin,txtSenha)) setTimeout("form.submit()", 3000);
     }); 
   }())

#box {
     background-color: #28B2A1;
     padding: 10px;
     border-radius: 6px; 
     margin-top: 25%;
 }
 strong {
    display: none;
    color: red; 
 }
 .btn {
     margin: 0 auto;
 }
 #sucesso {
     visibility: hidden;
     color: #28B2A1;
     background-color: #fff;
     padding: 10px;
     border-radius: 6px;        
 }
 samp{
     font-weight: bolder;
 }

<div class="container">
        <div class="row justify-content-center">
            <div class="col-md-4 col-xs-12" id="box">
                <h4 class="text-center" id="sucesso">Login realizado com sucesso!</h4>
                <form name="frmLogin" id="form" action="validar_login_js.html" method="post" onsubmit="return validarLogin(txtLogin.value,txtSenha.value);">
                    <samp><label for="login">LOGIN</label></samp>
                    <input type="text" class="form-control" id="login" name="txtLogin" value="Fulano" onfocus="this.value='';" onblur="input1()">
                    <strong id="strong1">Preencha corretamente o campo Login!</strong id="strong1"><br>
                    <samp><label for="senha">SENHA</label></samp>
                    <input type="password" class="form-control" id="senha" name="txtSenha" value="123456" onfocus="this.value='';" onblur="input2()">
                    <strong id="strong2">Preencha corretamente o campo Senha!</strong><br><br>       
                    <p class="text-center"><input type="submit" class="btn btn-warning" name="btnEnviar" value="Enviar" id="enviar">&nbsp;&nbsp;&nbsp;<input type="reset" class="btn btn-secondary" name="btnLimpar" value="Resetar"></p>
                </form>
            </div>
        </div>
    </div>