Inserindo e removendo classe no input se estiver fazio

[tchaves 0]

Olá pessoal, boa tarde!

 

Gostaria da ajuda de vocês com o código abaixo, sei até que é simples, mas o mesmo não está funcioando conforme desejado.

 

Tenho alguns campos de formulário e marquei com tag 'obrigatório' todos os campos que são de fato obrigatório. Depois de clicar no botão, queria que os campos marcados como obrigatório ficassem com a borda vermelha atribuído pela classe 'vazio'.

 

Não está dando certo com o código abaixo, alguém poderia me ajudar?

 

 

http://jsbin.com/kisililefo/1/edit?html,css,js

[William Bruno 1501]

Pq vc não usa o atributo html5 required ? ele já faz isso sem nenhum js.

[tchaves 0]

Opa Willian Bruno, obrigado pela resposta, mas eu até conheço o required, acontece que eu também quero fazer outras validações junto com o campo sem valor.

 

Alguém saberia fazer adicionando e removendo classe pelo JQuery?

[William Bruno 1501]

Okay.. segue.. primeiro tinha um probleminha de css:

input[type="text"].vazio {
  border-color: #FC9B9F;
}

a tua classe .vazio tinha uma especificidade muito baixa, então apesar do JS colocar a classe, a borda nunca aparecia vermelha, pq a regra de cima era muito mais forte.

Igualei o jogo ao mudar para o CSS acima.

Além disso, rescrevi um pouco o js:

 

$('form').on('submit', function(event){
  event.preventDefault();
  var $form = $(this);
  var $obrigatorio = $('.obrigatorio');
  
  $obrigatorio.each(function() {
    var $this = $(this);
    var valor = $this.val().trim();
    
    if ( valor === '' ) {
      $this.addClass('vazio');
    }
    else if ( valor !== '' ) {
      $this.removeClass('vazio');
    }
  });
    
  return false;
});

não entendi o motivo da DIV com classe vazio, então removi ela, e deixei mais claro o código js.

[tchaves 0]

Opa Willian Bruno, entendi o código e suas considerações.

 

Obrigado pela ajuda meu amigo!

 

WillianBruno++