CodeWiki

✅ Formulário funcional com validação

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Formulário de Contato</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 20px;
    }

    label {
      display: block;
      margin-top: 15px;
      font-weight: bold;
    }

    input {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
      border: 1px solid #dedede;
      border-radius: 4px;
      box-sizing: border-box;
    }

    #iSendButton {
      margin-top: 20px;
      padding: 12px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }

    #iSendButton.needCheck {
      background-color: #dc3545;
    }

    #iSendButton:disabled {
      background-color: #aaa;
      cursor: not-allowed;
    }
  </style>
</head>
<body>

  <h2>Formulário de Contato</h2>

  <form id="formContainer">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" placeholder="Seu nome">

    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" placeholder="seu@email.com">

    <label for="telefone">Telefone:</label>
    <input type="tel" id="telefone" name="telefone" placeholder="(99) 99999-9999">

    <button type="button" id="iSendButton">Enviar</button>
  </form>

  <script>
    let iSendButton = document.getElementById("iSendButton");
    let formName = document.querySelector('#nome');
    let formEmail = document.querySelector('#email');
    let formPhone = document.querySelector('#telefone');

    formName.addEventListener('focusout', checkEmpty);
    formEmail.addEventListener('focusout', checkEmpty);
    formPhone.addEventListener('focusout', checkEmpty);

    iSendButton.addEventListener("click", (e) => {
      if (checkEmpty() != false) {
        document.querySelector('#iSendButton').innerHTML = 'Enviando...';
        document.querySelector('#iSendButton').classList.add('needCheck');

        setTimeout(function () {
          window.location.href = "https://www.interago.com.br/App/Sites/157/obrigado-pelo-contato";
        }, 1500);
      }
    });

    function checkEmpty() {
      let errorBorderColor = "1px solid #e58787";
      let okBorderColor = "1px solid #dedede";
      let nome = document.getElementById("nome");
      let email = document.getElementById("email");
      let phone = document.getElementById("telefone");
      let valid = true;

      if (nome.value === "") {
        nome.style.border = errorBorderColor;
        valid = false;
      } else {
        nome.style.border = okBorderColor;
      }

      if (email.value === "") {
        email.style.border = errorBorderColor;
        valid = false;
      } else {
        email.style.border = okBorderColor;
      }

      if (phone.value === "") {
        phone.style.border = errorBorderColor;
        valid = false;
      } else {
        phone.style.border = okBorderColor;
      }

      if (valid == true) {
        document.querySelector('#iSendButton').classList.remove('needCheck');
      } else {
        if (!document.querySelector('#iSendButton').classList.contains('needCheck')) {
          document.querySelector('#iSendButton').classList.add('needCheck');
        }
      }

      return valid;
    }
  </script>

</body>
</html>

📚 Documentação: Formulário de Contato com Validação

🎯 Objetivo

Este formulário permite que usuários enviem informações de contato (nome, e-mail e telefone) com validação básica de preenchimento. Ele fornece feedback visual, evita envio com campos vazios e redireciona para uma página de agradecimento após o envio.

🧩 Estrutura HTML esperada

<form id="formContainer">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome">

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">

  <label for="telefone">Telefone:</label>
  <input type="tel" id="telefone" name="telefone">

  <button type="button" id="iSendButton">Enviar</button>
</form>

Cada campo tem um id único para ser identificado no JavaScript.
O botão de envio tem type="button" para evitar envio automático.

🎨 Estilo CSS básico

input {
  border: 1px solid #dedede;
  padding: 10px;
  width: 100%;
  margin-bottom: 10px;
}

input:focus {
  outline: none;
}

#iSendButton {
  background-color: #007bff;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

#iSendButton.needCheck {
  background-color: #dc3545;
}

Campos válidos mantêm borda cinza.
Campos inválidos recebem borda vermelha via JavaScript.
O botão muda de cor se houver erro.

⚙️ Código JavaScript

let iSendButton = document.getElementById("iSendButton");
let formName = document.querySelector('#nome');
let formEmail = document.querySelector('#email');
let formPhone = document.querySelector('#telefone');

formName.addEventListener('focusout', checkEmpty);
formEmail.addEventListener('focusout', checkEmpty);
formPhone.addEventListener('focusout', checkEmpty);

iSendButton.addEventListener("click", (e) => {
  if (checkEmpty() != false) {
    iSendButton.innerHTML = 'Enviando...';
    iSendButton.classList.add('needCheck');

    setTimeout(function () {
      window.location.href = "https://www.interago.com.br/App/Sites/157/obrigado-pelo-contato";
    }, 1500);
  }
});

function checkEmpty() {
  let errorBorderColor = "1px solid #e58787";
  let okBorderColor = "1px solid #dedede";
  let valid = true;

  if (formName.value === "") {
    formName.style.border = errorBorderColor;
    valid = false;
  } else {
    formName.style.border = okBorderColor;
  }

  if (formEmail.value === "") {
    formEmail.style.border = errorBorderColor;
    valid = false;
  } else {
    formEmail.style.border = okBorderColor;
  }

  if (formPhone.value === "") {
    formPhone.style.border = errorBorderColor;
    valid = false;
  } else {
    formPhone.style.border = okBorderColor;
  }

  if (valid) {
    iSendButton.classList.remove('needCheck');
  } else {
    if (!iSendButton.classList.contains('needCheck')) {
      iSendButton.classList.add('needCheck');
    }
  }

  return valid;
}

🧠 Explicação da lógica

checkEmpty() verifica se os campos estão preenchidos.
Se algum estiver vazio:
- A borda fica vermelha
- O botão recebe a classe needCheck
Se todos estiverem preenchidos:
- O botão muda para "Enviando..."
- Após 1,5 segundos, o usuário é redirecionado

💡 Boas práticas

Use type="email" e type="tel" para validação nativa.
Adicione required nos campos se quiser validação HTML.
Evite redirecionar sem mostrar uma confirmação visual (pode ser adaptado).
Para envio real, substitua o setTimeout por uma chamada AJAX ou fetch().

🧪 Exemplo de uso

<input type="text" id="nome" placeholder="Seu nome">
<input type="email" id="email" placeholder="seu@email.com">
<input type="tel" id="telefone" placeholder="(99) 99999-9999">
<button id="iSendButton">Enviar</button>

🧠 Bloco 1: Selecionando os elementos do formulário

let iSendButton = document.getElementById("iSendButton");

🔹 Seleciona o botão de envio do formulário (<button id="iSendButton">) e guarda na variável iSendButton.

let formName = document.querySelector('#nome');
let formEmail = document.querySelector('#email');
let formPhone = document.querySelector('#telefone');

🔹 Seleciona os campos de entrada (input) de nome, e-mail e telefone usando seus IDs, e guarda em variáveis.

🧠 Bloco 2: Adicionando eventos de validação ao sair dos campos

formName.addEventListener('focusout', checkEmpty);
formEmail.addEventListener('focusout', checkEmpty);
formPhone.addEventListener('focusout', checkEmpty);

🔹 Toda vez que o usuário sai de um campo (evento focusout), a função checkEmpty() é chamada para verificar se o campo está vazio.

🧠 Bloco 3: Evento de clique no botão de envio

iSendButton.addEventListener("click", (e) => {

🔹 Quando o botão é clicado, executa a função abaixo.

  if (checkEmpty() != false) {

🔹 Chama checkEmpty() para validar os campos. Se todos estiverem preenchidos (true), continua.

    document.querySelector('#iSendButton').innerHTML = 'Enviando...';

🔹 Muda o texto do botão para "Enviando..." para indicar que o processo começou.

    document.querySelector('#iSendButton').classList.add('needCheck');

🔹 Adiciona a classe needCheck ao botão — provavelmente usada para mudar o estilo (como cor vermelha).

    setTimeout(function () {
      window.location.href = "https://www.interago.com.br/App/Sites/157/obrigado-pelo-contato";
    }, 1500);

🔹 Aguarda 1,5 segundos e redireciona o usuário para uma página de agradecimento.

🧠 Bloco 4: Função de validação `checkEmpty()`

function checkEmpty() {

🔹 Define a função que verifica se os campos estão vazios.

  let errorBorderColor = "1px solid #e58787";
  let okBorderColor = "1px solid #dedede";

🔹 Define as cores de borda para campos inválidos (vermelho) e válidos (cinza).

  let nome = document.getElementById("nome");
  let email = document.getElementById("email");
  let phone = document.getElementById("telefone");

🔹 Seleciona novamente os campos do formulário (poderia usar as variáveis já definidas antes, mas aqui são reusadas).

  let valid = true;

🔹 Inicializa uma variável valid como true. Ela será usada para saber se todos os campos estão preenchidos.

🔍 Validação de cada campo

  if (nome.value === "") {
    nome.style.border = errorBorderColor;
    valid = false;
  } else {
    nome.style.border = okBorderColor;
  }

🔹 Se o campo nome estiver vazio, pinta a borda de vermelho e marca como inválido. Caso contrário, pinta de cinza.

🔹 O mesmo se repete para os campos de e-mail e telefone:

  if (email.value === "") {
    email.style.border = errorBorderColor;
    valid = false;
  } else {
    email.style.border = okBorderColor;
  }

  if (phone.value === "") {
    phone.style.border = errorBorderColor;
    valid = false;
  } else {
    phone.style.border = okBorderColor;
  }

🔍 Atualiza a classe do botão com base na validação

  if(valid == true) {
    document.querySelector('#iSendButton').classList.remove('needCheck');
  } else {
    if(document.querySelector('#iSendButton').classList.contains('needCheck') == false) {
      document.querySelector('#iSendButton').classList.add('needCheck');
    }
  }

🔹 Se todos os campos estiverem preenchidos, remove a classe needCheck do botão.
🔹 Se houver erro, adiciona a classe needCheck (caso ainda não esteja lá).

🔚 Retorna o resultado da validação

  return valid;
}

🔹 Retorna true se todos os campos estiverem preenchidos, ou false se algum estiver vazio.

✅ Conclusão

Esse script:

Valida se os campos estão preenchidos
Dá feedback visual com bordas coloridas
Muda o botão para "Enviando..."
Redireciona após 1,5 segundos