Form Validation with Javascript

Question

Form Validation with Javascript

Navigation

#1 by (2 votes)
#2 by (0 votes)

3

It shows the error only in one field at a time, ie the part of "getElementById ('tuser')" and the other tpass, is the element of error. I wish that 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">

javascript html

asked by anonymous 13.10.2017 / 23:16

2 answers

0

You can check the 2 fields and return false .

However, for the loader() function to be called after positive form validation, it is necessary to remove the return true; 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>

14.10.2017 / 00:04

How to use dependency injection outside a Controller with ninject Decimal values being rounded in SQLIte

score 2 · Accepted Answer

In this case you avoid giving a return on each of the if . You can start the "optimistic" function with var valid = true; and then change 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
}