Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Meu codigo nao funciona

Olá, estou criando um programa, e preciso que ele veja se o formulario tem algo escrito ou nao, caso nao tenha ele deve pintar a borda do input de vermelho. OBS:(estou usando jquery)

css:

.nome-vazio{
  border: 5px solid red;
}

Esse e o js:

var botaoFinal = $(".botao-final");
var nome = $("#nome").text();
botaoFinal.on("click",function(){
  var nomeVazio = $("#nome").text("");
    if(nomeVazio ){
        nome.addClass(".nome-vazio");
    };
});

Esse e o erro que esta dando no console:

Uncaught TypeError: nome.addClass is not a function
    at HTMLButtonElement.<anonymous> (form.js:6)
    at HTMLButtonElement.dispatch (jquery.js:5110)
    at HTMLButtonElement.elemData.handle (jquery.js:4918)
(anonymous) @ form.js:6
dispatch @ jquery.js:5110
elemData.handle @ jquery.js:4918
2 respostas
solução!

Olá Paulo Renato, olhando seu código atual, vejo 2 erros:

• o ";" após a chave de fechamento do if;

• o "." para se referenciar a classe em nome.addClass(".nome-vazio");

Lembre se quando usamos o addClass, já entende-se que é uma classe, e não precisa colocar o "ponto", somente o nome da classe.

Caso queira, você também pode usar a propriedade "required", e pelo html já faz a verificação do campo se ele está preenchido ou não.

Exemplo:

<input type="text" id="nome" required>

Vou deixar abaixo a solução que encontrei para o seu caso com algumas implementações:

HTML:

<form>
    <input type="text" id="nome">
     <button class="botao-final">Botão</button>
</form>

CSS:

.nome-vazio{
  border: 5px solid red;
}
.nome-preenchido{
  border: 1px solid black;
}

JS:

var botaoFinal = $(".botao-final");

botaoFinal.on("click", function(event){
    var nome = $("#nome").val();

    // se o valor digitado no input com id="nome" for diferente de vazio
    if(!nome){
        $("#nome").addClass("nome-vazio");
        //caso campo estiver vazio, não submeta o formulário
        event.preventDefault();
    }

    else{
        $("#nome").addClass("nome-preenchido");
    }
});

Esse seu problema é por causa da sua variável nome. No trecho onde ela é declarada você está atribuindo uma String à variável ao invés do elemento cuja class seja "nome".

var nome = $("#nome").text();

Ou seja, para que o seu código funcionasse, deveria salvar na variável nome o elemento HTML e não o seu conteúdo de texto, desta forma:

var nome = $("#nome");

Ou mesmo, na hora de adicionar a class, utilizar:

$("#nome").addClass("nome-vazio");

Outra coisa que é bom substituir é o uso de .text("") para pegar o conteúdo do input pelo .val() que também pertence ao JQuery e te devolve o que está contido no value do input.

E assim como o Vandré comentou, na hora de adicionar uma nova class a um elemento HTML, não precisa colocar o "." na String que estará informando à function addClass().

Claro que tem outras formas de fazer essa validação que você está tentando fazer, inclusive utilizando restrições como o uso do required no input como o Vandré havia citado, mas espero ter ajudado a sanar a dúvida sobre esse erro.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software