Como remover o Required de uma Tag com JavaScript

[download id=”239″]

Esta é uma forma fácil e rápida de remover o atributo required sem a necessidade de importar bibliotecas com o JQuery ou qualquer outra. Normalmente não existe motivo para remove-lo, ou em muitos casos este tipo de validação é feita no back-end, mas veremos um jeito simples e que permitirá o post de um form quando um condição ocorrer.

O código

Como mencionado anteriormente, utilizaremos um form abaixo para testarmos nosso exemplo:

<form method="post" style="border:1px solid black; padding:10px;">
  <label>Nome:</label>
  <input type="text" id="name" required/>
  <br/>
  <label>Telefone:</label>
  <input type="text" id="requiredInput" required/>
  <br/>
  <input type="submit"/>
</form>

Se você rodar o código acima e não adicionar nenhum valor no campo telefone, o form será impedido de enviar os dados pois o campo é obrigatório. Agora, após um tempo tornou-se necessário que certas pessoas não precisem enviar o telefone delas pois já são clientes, ou funcionários (mundo imaginário, você cria o motivo). Em nosso exemplo qualquer pessoa que se chamar “Pedro Silva” não precisará colocar o número de telefone. A função javascript que a acompanha pode ser bem simples quanto o código abaixo

function removeRequired() {
  if( document.getElementById("name").value === "Pedro Silva"){
    document.getElementById("requiredInput").removeAttribute("required");
  }
}

Tendo nossa condição definida, podemos começar a vincular o nosso código. Neste caso é importante lembrar que não adianta colocar o evento dentro do onsubmit do form, pois a validação ocorre antes disto. O melhor local que achei para fazê-lo é no onclick do próprio input utilizar para enviar este form.

<input onclick="removeRequired()" type="submit"/>

Conclusão

Como vocês podem ver, é fácil e rápido remover o required das tags html. O difícil é achar artigos em português que falem de como fazê-lo. Acredito que essa tarefa é tão simples que realmente não vale o peso de uma biblioteca para implementar essa funcionalidade, mas se você já a está usando para outras coisas e ela reduz ainda mais a complexidades, então ela é provavelmente o jeito mais correto do que o mencionado aqui.