Form Validation with Javascript

Question

It shows the error only in one field at a time, i.e., the part of "getElementById('tuser')" and the other tpass, is the error element. I would like if both are null, show the error in both at once. However, I would like to use this same method.

Javascript:

function validate(){

         if (document.formlog.usuario.value == ""){
            document.getElementById('tuser').style = "display:block;";
            return false;
         }

         if(document.formlog.senha.value == ""){
            document.getElementById('tpass').style = "display:block;";
            return false;
         }

         return true;
         loader();
}

HTML (first part of code)

<form method="post" name="formlog" id="login-form" autocomplete="off" onsubmit="return(validate());" accept-charset="utf-8">

Answer 1

In this case it avoids giving return on each of the if. You can start the "optimistic" function with var valid = true; and then switch to false if one of them fails.

Example:

function validate() {
  var valid = true;

  if (document.formlog.usuario.value == "") {
    document.getElementById('tuser').style = "display:block;";
    valid = false;
  }

  if (document.formlog.senha.value == "") {
    document.getElementById('tpass').style = "display:block;";
    valid = false;
  }

  return valid;
  loader(); // <----- isto nunca é usado (!) pois tens um return antes
}

Answer 2

You can check the 2 fields and return false.

However, so that the function loader() is called after the positive validation of the form, it is necessary to remove the return true; of function:

function validate(){

         if (document.formlog.usuario.value == "" && document.formlog.senha.value == ""){
            document.getElementById('tuser').style = "display:block;";
            document.getElementById('tpass').style = "display:block;";
            return false;
         }

         if (document.formlog.usuario.value == ""){
            document.getElementById('tuser').style = "display:block;";
            return false;
         }

         if(document.formlog.senha.value == ""){
            document.getElementById('tpass').style = "display:block;";
            return false;
         }

         loader();
}

function validate(){

         if (document.formlog.usuario.value == "" && document.formlog.senha.value == ""){
            document.getElementById('tuser').style = "display:block;";
            document.getElementById('tpass').style = "display:block;";
            return false;
         }


         if (document.formlog.usuario.value == ""){
            document.getElementById('tuser').style = "display:block;";
            return false;
         }

         if(document.formlog.senha.value == ""){
            document.getElementById('tpass').style = "display:block;";
            return false;
         }

         loader();
}

function loader(){
	alert("Formulário enviado!");
}

<form method="post" name="formlog" id="login-form" autocomplete="off" onsubmit="return(validate());" accept-charset="utf-8">
	<input type="text" name="usuario" placeholder="Usuário" />
    <div id="tuser" style="display: none;">erro usuario</div>
    <br />
    <br />
	<input type="password" name="senha" placeholder="Senha" />
    <div id="tpass" style="display: none;">erro senha</div>
    <br />
	<br />
	<input type="submit" value="enviar" />
</form>