Manipulação de Formulários JavaScript: Validação e Eventos

A manipulação de formuláriosIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário. em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. permite capturar dados inseridos pelos usuários, processar esses dados e realizar validações antes de enviá-los para um servidor ou utilizá-los em alguma lógica de negócio. É uma parte essencial no desenvolvimento web, pois impacta diretamente a experiência do usuário e a segurança da aplicação.

Neste tutorial, vamos abordar:

1. Estrutura básica de um formulárioIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário.

2. Acessando e manipulando campos de formulárioIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário. com JavaScript

3. Eventos de formulárioIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário.

4. ValidaçãoValidação de Código: W3C Validator e DebuggingAprenda a validar e corrigir erros de HTML com o W3C Validator. Descubra técnicas de debugging para melhorar a compatibilidade e a manutenção do seu site. de dados

5. Mostrando mensagens de erro e feedback para o usuário

6. Dicas para uma validaçãoValidação de Código: W3C Validator e DebuggingAprenda a validar e corrigir erros de HTML com o W3C Validator. Descubra técnicas de debugging para melhorar a compatibilidade e a manutenção do seu site. mais robusta

Estrutura Básica de Um Formulário🔗

FormuláriosIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário. em HTML são declarados usando a tag <form>. Dentro dela, colocamos elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. como <input>, <select>, <textarea> e botões de envio (<button type="submit"> ou <input type="submit">). Por exemplo:

<form id="form-exemplo">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Enviar</button>
</form>

Alguns atributos úteis:

name: identifica o campo e é usado para enviar os dados.
idAtributos HTML: `id`, `class`, `style`, `data-*`Aprenda a aplicar atributos id, class, style e data-* no HTML para organizar, estilizar e dinamizar sua página com praticidade e eficiência.: possibilita a seleção do elemento via JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. ou CSS.
requiredValidação de Formulários: `required`, `pattern`, `min/max`Aprenda a usar os atributos required, pattern, min e max para validar formulários HTML e garantir dados consistentes e uma melhor experiência de usuário.: faz validaçõesValidação de Código: W3C Validator e DebuggingAprenda a validar e corrigir erros de HTML com o W3C Validator. Descubra técnicas de debugging para melhorar a compatibilidade e a manutenção do seu site. básicas automaticamente em navegadores mais modernos.

Acessando e Manipulando Campos de Formulário com JavaScript🔗

Para acessar valores de um formulárioIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário. no JavaScript, geralmente buscamos o elemento pelo idAtributos HTML: `id`, `class`, `style`, `data-*`Aprenda a aplicar atributos id, class, style e data-* no HTML para organizar, estilizar e dinamizar sua página com praticidade e eficiência. e então buscamos a propriedadeClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. value:

<form id="form-exemplo">
  <input type="text" id="nome" name="nome" placeholder="Seu nome">
  <button type="submit">Enviar</button>
</form>

const form = document.getElementById("form-exemplo");
const inputNome = document.getElementById("nome");
form.addEventListener("submit", function (event) {
  event.preventDefault(); // Evita o envio automático do formulário
  const valorNome = inputNome.value;
  console.log("Nome digitado:", valorNome);
  // Outras ações podem ser executadas aqui
});

Usando esse padrão, podemos manipular cada campo individualmente: ler valores, realizar conversões e até mesmo preencher ou alterar campos do formulárioIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário..

Eventos de Formulário🔗

Existem diversos eventos relacionados a formuláriosIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário. no JavaScript. Abaixo, alguns dos mais importantes:

submit: ocorre quando o formulárioIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário. é enviado (por clique ou tecla Enter).
change: é disparado quando um campo perde o foco e seu valor foi modificado.
input: ocorre a cada alteração do valor de um campo (enquanto se digita).
focus: quando o campo recebe o foco.
blur: quando o campo perde o foco.

Exemplo de uso do evento change em um <select>:

<select id="opcoes">
  <option value="opcao1">Opção 1</option>
  <option value="opcao2">Opção 2</option>
</select>

const selectOpcoes = document.getElementById("opcoes");
selectOpcoes.addEventListener("change", function () {
  console.log("Valor selecionado:", selectOpcoes.value);
});

Validação de Dados🔗

Validação Nativa (HTML5)

A utilização de atributos HTML5HTML vs. XHTML vs. HTML5: DiferençasExplore a evolução das linguagens web e descubra como o HTML se transformou: do HTML 4.01 ao XHTML e ao inovador HTML5, otimizando projetos e SEO., como requiredValidação de Formulários: `required`, `pattern`, `min/max`Aprenda a usar os atributos required, pattern, min e max para validar formulários HTML e garantir dados consistentes e uma melhor experiência de usuário., minlength, maxlength e pattern, permite que o próprio navegador realize validaçõesValidação de Código: W3C Validator e DebuggingAprenda a validar e corrigir erros de HTML com o W3C Validator. Descubra técnicas de debugging para melhorar a compatibilidade e a manutenção do seu site. básicas automaticamente. Se o usuário tentar enviar o formulárioIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário. sem preencher um campo requiredValidação de Formulários: `required`, `pattern`, `min/max`Aprenda a usar os atributos required, pattern, min e max para validar formulários HTML e garantir dados consistentes e uma melhor experiência de usuário., por exemplo, o navegador exibirá uma mensagem de erro sem que seja necessário escrever JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. adicional.

<input
  type="text"
  id="nome"
  name="nome"
  required
  minlength="3"
  placeholder="Digite seu nome"
/>

Validação Personalizada em JavaScript

Para criar regras mais específicas ou exibir mensagens de erro customizadas, fazemos a validação via JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente.. Geralmente, adicionamos um listener para o evento submit e aplicamos funçõesFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. de verificação antes de permitir o envio.

Exemplo simples de validaçãoValidação de Código: W3C Validator e DebuggingAprenda a validar e corrigir erros de HTML com o W3C Validator. Descubra técnicas de debugging para melhorar a compatibilidade e a manutenção do seu site. com regex:

<form id="form-validacao">
  <label for="telefone">Telefone:</label>
  <input type="tel" id="telefone" name="telefone">
  <button type="submit">Confirmar</button>
</form>

const formValidacao = document.getElementById("form-validacao");
const inputTelefone = document.getElementById("telefone");
formValidacao.addEventListener("submit", function (event) {
  event.preventDefault();
  // Exemplo de regex para telefone simples
  const padraoTelefone = /^\(\d{2}\)\s?\d{4,5}-\d{4}$/;
  const valorTelefone = inputTelefone.value;
  if (!padraoTelefone.test(valorTelefone)) {
    alert("Informe um telefone válido no formato (XX) XXXX-XXXX ou (XX) XXXXX-XXXX.");
    return;
  }
  // Se a validação passar, podemos enviar ou processar os dados
  alert("Telefone válido! Enviando dados...");
  // formValidacao.submit(); // se desejarmos enviar de fato
});

Mostrando Mensagens de Erro e Feedback Para o Usuário🔗

Além de alerts, podemos exibir mensagens de erro ao lado do campo. Assim o usuário é avisado de forma mais clara e o layout fica mais amigável:

<style>
  .erro {
    color: red;
    font-size: 0.9rem;
  }
</style>
<form id="cadastro-email">
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required>
  <span id="erroEmail" class="erro"></span>
  <button type="submit">Enviar</button>
</form>

const formCadastroEmail = document.getElementById("cadastro-email");
const inputEmail = document.getElementById("email");
const erroEmail = document.getElementById("erroEmail");
formCadastroEmail.addEventListener("submit", function (event) {
  // Impede o envio caso o e-mail seja inválido
  if (!inputEmail.validity.valid) {
    event.preventDefault();
    erroEmail.textContent = "Por favor, insira um e-mail válido!";
  }
});

Podemos agir de maneira semelhante para outros campos, removendo a mensagem de erro quando o valor se torna válido. Isso oferece uma melhor experiência e deixa os usuários mais conscientes sobre como fornecer os dados corretamente.