Validando Formulários com JavaScript

• Constraint Validation API: Certos elementos HTML, como os elementos textarea e input, expõem uma API de validação de restrições. Essa API permite que você afirme que o valor fornecido pelo usuário para esse elemento passa por qualquer validação em nível HTML que você tenha escrito, como comprimento mínimo ou correspondência de padrão.
• Método checkValidity(): Este método retorna true se o elemento corresponder a toda a validação HTML (baseada em seus atributos) e false se falhar.

<form>
  <label>
    Email:
    <input
      id="email"
      type="email"
      required
      pattern=".+\.com$"
      placeholder="example@site.com"
    />
  </label>
</form>

<script>
  const input = document.getElementById("email");

  input.addEventListener("input", (e) => {
    if (!e.target.checkValidity()) {
      e.target.setCustomValidity("You must use a .com email.");
    } else {
      e.target.setCustomValidity("");
    }
  });
</script>

• Método reportValidity(): Este método informa ao navegador que o input é inválido.

<form>
  <label>
    Email:
    <input
      id="email2"
      type="email"
      required
      pattern=".+\.com$"
      placeholder="example@site.com"
    />
  </label>
</form>

<script>
  const input = document.getElementById("email2");

  input.addEventListener("input", (e) => {
    if (!e.target.checkValidity()) {
      e.target.reportValidity();
    }
  });
</script>

• Propriedade validity: Esta propriedade é usada para obter ou definir o estado de validade dos controles de formulário (como <input>, <select>, etc.) e fornece informações sobre se a entrada do usuário atende às restrições definidas para esse elemento (por exemplo, campos required, restrições de padrão, comprimento máximo, etc.).

<input
  id="age"
  type="number"
  min="18"
  placeholder="Enter age (18+)"
/>

<script>
  const input = document.getElementById("age");

  input.addEventListener("input", (e) => {
    console.log(e.target.validity);
  });
</script>

• Propriedade patternMismatch: Isso será true se o valor não corresponder ao padrão de expressão regular especificado.

Método preventDefault()

• Definição: Todo evento que é disparado no DOM possui algum tipo de comportamento padrão. O evento de clique em uma checkbox alterna o estado dessa checkbox, por padrão. Pressionar a barra de espaço em um botão focado ativa o botão. O método preventDefault() nesses objetos Event impede que esse comportamento aconteça.

<form id="form">
  <input type="text" placeholder="Try to submit" />
  <button type="submit">Submit</button>
</form>

<p id="status"></p>

<script>
  const form = document.getElementById("form");
  const status = document.getElementById("status");

  form.addEventListener("submit", (event) => {
    event.preventDefault();
    status.textContent = "Form submission prevented.";
  });
</script>

Enviando Formulários

• Definição: Existem três maneiras de um formulário ser enviado. A primeira é quando o usuário clica em um botão no formulário que possui o atributo type definido como submit. A segunda é quando o usuário pressiona a tecla Enter em qualquer campo input editável no formulário. A terceira é por meio de uma chamada JavaScript aos métodos requestSubmit() ou submit() do elemento form.
• Atributo action: O atributo action deve conter uma URL ou um caminho relativo para o domínio atual. Esse valor determina para onde o formulário tenta enviar os dados - se você não definir um atributo action, o formulário enviará os dados para a URL da página atual.

<form action="https://G.E.A.R ACADEMY.org" method="GET">
  <input
    type="number"
    name="number"
    placeholder="Enter a number"
  />
  <button type="submit">Submit</button>
</form>

• Atributo method: Este atributo aceita um HTTP method padrão, como GET ou POST, e usa esse método ao fazer a requisição para a URL da ação. Quando um método não é definido, o formulário usará por padrão uma requisição GET. Os dados no formulário serão codificados na URL como pares name=value e anexados à URL da ação como parâmetros de consulta.

<form action="/data" method="POST">
  <input
    type="number"
    id="input"
    placeholder="Enter a number"
    name="number"
  />
  <button type="submit">Submit</button>
</form>

• Atributo enctype: O elemento form aceita um atributo enctype, que representa o tipo de codificação a ser usado para os dados. Esse atributo aceita apenas três valores: application/x-www-form-urlencoded (que é o padrão, enviando os dados como um corpo de formulário codificado em URL), text/plain (que envia os dados em texto simples, em pares name=value separados por quebras de linha) ou multipart/form-data, que é especificamente para lidar com formulários com upload de arquivos.