1

Ao invés de aparecer aquela caixa de texto, gostaria que somente as bordas do meu input ficassem vermelhas quando o usuario não as preencher. exite alguma maneira de fazer isso?

2 Respostas 2

2

Usando JavaScript você pode fazer sem o uso do required.

Adicione uma classe .required aos campos que você quer que sejam preenchidos e use o script que irá verificar esses campos no submit, alterando a cor da borda dos que não foram preenchidos:

formulario.onsubmit = function(){
   var req = document.querySelectorAll(".required");
   var flag = true;
   for(var x=0; x<req.length; x++){
      if(!req[x].value){
         req[x].style.borderColor = "red";
         flag = false;
      }
   }
   
   return flag;
}
<form id="formulario">
   <p>
      <input type="text" placeholder="Preenchimento opcional">
   </p>
   <p>
      <input type="text" class="required" placeholder="Preenchimento obrigatório">
   </p>
   <button>Enviar</button>
</form>

1
  • 1
    Era exatamente isso que eu queria, muito obrigado brother, me salvou 4/08/2018 às 14:11
2

Vc pode tratar isso com as pseudo-classes :invalid, :focus, e :valid

Repare que a ordem deve ser essa para os estilos não se sobrescreverem de maneira incorreta. Primeiro ele fica como invalido e vermelho até que vc foque no campo, ai ele fica azul, e caso vc preencha algo ele fica verde.

Veja o exemplo abaixo para entender melhor.

input:invalid {
    border: 2px solid red;
}
input:focus {
    border: 2px solid blue;
}
input:valid {
    border: 2px solid green;
}
<input type="text" required>

EDIT: Exemplo de formatação sem o required

Como esse campo não tem regrada de valido ou invalido ele só troca de cor no :focus e quando vc clicar fora ele fica verde, pois é sempre valido já que não tem regras como patterns ou maxlength por exemplo...

input:focus {
    border: 2px solid blue !important;
}
input:valid {
    border: 2px solid green;
}
<input type="text">

OBS: Essa é uma validação apenas no user-side para dar um feedback visual para o usuário, esses estilos de css não servem para validar os campos no banco, valem apenas melhorar a experiencia do usuário na interface.

4
  • Opa show de bola, muito obrigado, mais uma dúvida, o campo required continua aparecendo, como posso retirá-lo? 4/08/2018 às 14:06
  • @GuilhermeFreitas é assim, quando o campo é required e náo está preenchido ele automaticamente passa a ser invalido, porém se vc retirar o required ele passa automaticamente a ser válido... Eu fiz um edit na minha resposta de um exemplo sem o required, olha ai se te atende melhor.
    – hugocsl
    4/08/2018 às 14:14
  • 1
    Agora eu entendi, muito obrigado cara! Valeu mesmo! 4/08/2018 às 14:18
  • @GuilhermeFreitas tranquilo jovem é meio confuso esse lance mesmo, o ideal seria vc usar as duas respostas juntas. Pois só com o JS o usuário só vai ver que escreveu algo errado ou deixou um campo obrigatório em branco depois que clicar em Enviar... Ai ele tem que voltar no forme e ver onde errou... o ideal é que ele veja na hora se o campo foi validado, e não só quando clicar em enviar, por isso tente usar as duas opções juntas no seu form
    – hugocsl
    4/08/2018 às 14:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .