JS-0510 - JavaScript Completo ES6 - Forms

JS-0510 - JavaScript Completo ES6 - Forms
Publicado em 23/02/24 16:02
Visualizações: 8

Obtendo valores de formulários com JS

A utilização de formulários é muito comum em sites, sendo uma ferramenta valiosa para a obtenção de dados dos usuários.

Utilizamos inputs de diferentes tipos, selects etc, mas o que muitos não sabem, é que o JavaScript possui métodos específicos para obtenção de dados dos formulários.

O JS tem a capacidade para identificar o que é um formulário, o que é input, o que é select etc, e quais são os valores destes, apresentando tudo como objetos (tudo realmente é objeto).

A propriedade que permite o acesso aos formulários (read-only) é a forms do objeto Document. Ex:

JS-0510 - JavaScript Completo ES6 - Forms

JS-0510 - JavaScript Completo ES6 - Forms

No exemplo acima:

  • document.forms: retornou uma coleção de formulários (HTMLCollection) existentes na página;
  • document.forms.contact: retornou o formulário cuja propriedade name seja igual a propriedade "contact";
  • document.forms.contact.elements: retornou os elementos do formulário "contact"; e
  • document.forms[0].elements[0].value: retornou o valor do primeiro elemento do primeiro formulário (nesse caso, só tinha um).

Através da propriedade value, que retorna o valor do elemento no formulário, é possível utilizar um callback, para implementar um evento de leitura do valor digitado em um input, sendo disparado por um evento "change". Exemplo utilizando o console:

JS-0510 - JavaScript Completo ES6 - Forms

A propriedade forms possui um método de validação nativo para campos com o atributo "required", chamado de checkValidity().

A propriedade validationMessage possui a mensagem padrão de erro da Web API, modificável pelo método setCustomValidity('').

Abaixo, um exemplo, onde o campo e-mail está em um padrão inválido. Dentro da função "handleCheck", a negação de checkValidity() aplica a mudança da cor de fundo e o console.log() aplicado antes e após o setCustomValidity() apresenta a alteração da mensagem padrão, que poderia ser adicionada em um elemento span abaixo de cada input por exemplo, para sinalizar ao usuário um erro.

JS-0510 - JavaScript Completo ES6 - Forms

Os valores dos campos do tipo select são acessados da mesma forma, sendo possível utilizar os valores como parâmetros para aplicar diferentes eventos no DOM.

Abaixo segue um exemplo. Foi adicionado ao mesmo código de formulário um select contendo três cores, que serão aplicadas no corpo do documento através de uma função que obtém seu valor, executada no console:

JS-0510 - JavaScript Completo ES6 - Forms

JS-0510 - JavaScript Completo ES6 - Forms

Para cada tipo de campo de formulário existe um modo de acesso aos valores. Para verificar se um campo do tipo checkboxou radio está marcado, basta utilizar a propriedade checked no targetque retorna um valor booleano.

Podemos também obter todos os valores e ostransformar em um objeto para encaminhar via Ajax ou manipular de alguma forma. Ex:

JS-0510 - JavaScript Completo ES6 - Forms

No objeto chamado de dataObject, instanciado pelas chaves, cada nome de input foi transformado em propriedade e a esta propriedade foi atribuído o seu valor, formando o objeto no final.

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.