0

Antigamente eu chamava um formulário especifico por ID de criação no corpo do documento:

document.forms[0]

Só depois fui entender pra que serve o atributo NAME nestes casos, mas fiquei na dúvida, por exemplo, tenho mais de um formulário na página, podendo ser um login ou cadastro e outro pesquisa, assim atribuo o nome correspondente pra cada um, sendo que quero usar o formulário de login pra validar por Javascript:

<form name="login">
<input type="text" value="" name="user" required />
<input type="password" value="" name="user" required />
<input type="button" onclick="validateLogin()" />
</form>

Só que eu nem sei qual a maneira correta de fazer isso, ambas funcionam no Firefox, Chrome e Opera:

1°:

document.forms['login']

2°:

document.forms.login

Então eu costumo fazer assim:

var form = document.forms['login'] || document.forms.login

E eu nem sei se isso funciona mesmo, mas faço por precaução pro caso de algum navegador não funcionar.

Então, qual seria a melhor ou maneira mais correta, pra funcionar em qualquer navegador de qualquer plataforma?

3 Respostas 3

1

Acho que não existe maneira mais correta, existe maneira mais eficiente e prática. Se você quer apenas submeter um formulário, você pode omitir o nome do formulário e enviar ele através do this no onsubmit, que torna o processo mais simples.

Por exemplo:

function valida(i){

   if(!i.nome.value){
      alert("Informe o nome");
      return false;
   }

   if(!i.email.value){
      alert("Informe o email");
      return false;
   }
   
}
<form action="destino.php" method="post" onsubmit="return valida(this)">
      <h2>Cadastro</h2>
      <input type="text" name="nome" placeholder="Nome" />
      <br>
      <input type="text" name="email" placeholder="Email" />
    <button type="submit">Enviar</button>
</form>

O parâmetro i da função valida(i) já é o formulário. Então só basta você pegar os valores dos inputs (i.nome.value, i.email.value etc.).

Se você tiver outro formulário, é a mesma coisa. O this enviará os valores do formulário submetido. Desta forma você não se preocupa em saber "qual formulário capturar", porque o this já faz isso pra você.

0

Ambos funcionam, ambos estão corretos (o modo de usar) e ambos retornam HTMLCollection.

Esse valor retorno é uma interface semelhante à um array, podendo utilizar collection[0] ou collection.getItem(0) e a um object, podendo utilizar collection.form_name.

A vantagem de utilizar o nome do formulário é que você não vai ter que se preocupar com formulário dinâmico, pois o índice desses, porém variar bastante.

Você também pode utilizar da seguinte forma (todas elas são capturam o mesmo valor).

const form1 = document.querySelector("form")
const form2 = document.getElementsByTagName("form")[0]
const form3 = document.forms[0]
const form4 = document.forms.login

Exemplo:

const form1 = document.querySelector("form")
const form2 = document.getElementsByTagName("form")[0]
const form3 = document.forms[0]
const form4 = document.forms.login

console.log( form1 == form2 && form3 == form4 );

console.log( form1.elements.user );
console.log( form2.elements.user );
console.log( form3.elements.user );
console.log( form4.elements.user );
<form name="login">
  <input type="text" name="user" value="Your user" />
  <input type="password" name="pass" value="Your pass" />
</form>

1
  • 1
    Vale lembrar também document.querySelectorAll("form")[0].
    – NoobSaibot
    Commented 27/02/2018 às 22:09
0

Bom eu particulamente prefiro usar Jquery por ser mais "facil" e mais "limpo visualmente" mas como vc está utilizando javascript puro aqui vai

<form name="login">
    <input type="text" value="" name="user" required />
    <input type="password" value="" name="senha" required />
    <input type="button" onclick="validateLogin()" />
</form>

<script>
    var form = document.getElementsByName("login");
    var campoUsuario = form.getElementsByName("user");
    var senha = form.getElementsByName("senha");
</script>

Existem outras formas de se obter o elemento por ID, Class, Tipó

document.getElementById("algumid");
document.getElementsByClassName("algumaclass");
document.getElementsByTagName("div");

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .