Verificar campos de formulário

Front-end JavaScript
#1

Existe alguma função ou método que verifica se todos os campos de um formulário estão preenchido?

Ex: $("#formElement").fieldsFilled()

1 curtida
#2

Até onde eu sei, nao. vc pode pegar os elemtos e fazer um loop verificando se os

values  !== null || !== "" || !== undefined
1 curtida
#3

Seus campos estão marcados com required? Se sim, vc poderia fazer isso:

<form id="formElement">
  <input type="text" name="email" required>
  <input type="text" name="password" required>
  <button type="button" onclick="check()">Check</button>
</form>

<script>
  function check() {
    const form = document.getElementById("formElement");
    console.log(form.checkValidity())
  }
</script>

Se não puder ou não quiser usar o required, vc poderia usar algo assim:

<form id="formElement">
  <input type="text" name="email">
  <input type="text" name="password">
  <button type="button" onclick="check()" value="check">Check</button>
</form>

<script>
  function isAllFieldsFilled(form) {
    for (const item of form) {
      if (!item.value) {
        return false;
      }
    }
    return true;
  }

  function check() {
    const form = document.getElementById("formElement");
    console.log(isAllFieldsFilled(form))
  }
</script>

Eu só tive que colocar um value no <button> para funcionar, mas há outras formas de excluir botões e outros controles indesejados da verificação.

1 curtida
#4

Em relação a última forma que você me mostrou, se eu tivesse os inputs dentro de divs que estão no formulário funcionaria da mesma forma?

<form>
    <div>
       <input type="email" name="email">
    </div>
    <div>
       <input type="password" name="senha">
    </div>
</form>
#5

Sim.

#6

Eu testei aqui no meu porém todas as vezes retornava false mesmo com todos os campos preenchidos.

#7

Me mostra o HTML.

Se no seu formulário tiver um <input type="submit">, vc precisa colocar um valor nele, senão vai dar errado mesmo. Eu avisei na outra postagem.

#8

Entendi, vou verificar.

#9

Olá, estou tentando aprender javascript e tentei fazer um código o mais simples possível para verificar os campos com Javascript, apenas verificando se os campos foram digitados pelo usuário. Espero que ajude alguém também. Apanhei muito pra conseguir fazer esse
pouquinho de código…hehe:

Atenção, copie e cole no seu editor de código para ver melhor, pois muita parte é apenas comentário.

1.html:

<html>
<head>

 <title>
    Valida fields
 </title>
 
 <script type="text/javascript">
  function check() {
  
	//	var form = document.getElementByName("formElement");
    //const form = document.getElementById('formElement');
	//console.log(form.checkValidity());
	
	//var email = form.getElementByName("email").value;
	
	var emailLocal = formElement.email;
	var passwordLocal = formElement.password;
	
	//var email = document.formElement.getElementByName("email")[0].value;
	//var password = document.formElement.getElementById("password")value;
	
	//functionPassword = document.getElementById("password");
	
	//$("#formElement").fieldsFilled();
	
	//$("email").removeAttr('required');
	//$("password").removeAttr('required');
	
	//if((email.value == null) || (email.value == "") || (email.value == undefined))
	
	if((emailLocal.value == null) || (emailLocal.value == "") || (emailLocal.value == undefined))
	{
	  alert("Email inválido");
	}
	else
	{
	   alert("Email correto");
	}
	
	if((passwordLocal.value == null) || (passwordLocal.value == "") || (passwordLocal.value == undefined))
	{
	   alert("Password Inválido");
	}
	else
	{
	   alert("Password Correto");
	}
}
 </script>
 
<link rel="stylesheet" type="text/css" href="local.css">

</head>

<body>
teste
<form name="formElement" id="formElement" action="#" method="POST" >
  <input type="text" name="email" id="email"/>
  <input type="text" name="password" id="password"/>
  <button type="button" onclick="check()" value="check">Check</button>
</form>

</body>
</html>

local.css:

body
{
	background-color: blue;
	color: white;
}

Abraços!