Rodrigo Brito

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:

 

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:

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.

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:

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

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

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.