1

Boa noite! Estou com um problema na programação de um exercício, preciso remover estes "spans" dos campos que faltam no input, deixando apenas um que troca de acordo com a necessidade.

$(document).ready(function() {
    $("#validar").click(function() {
        $("input").each(function(index, element) {
            if ($(element).val() == '') {
                $("#validacao").append(element.id + "<br>");
            }
        });
    });
});
div {
    width: 40px;
    height: 40px;
    margin: 5px;
    float: left;
    border: 2px blue solid;
    text-align: center;
}

span {
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label for="nome">Nome</label>
    <input type="text" id="nome">
    <br>
    <label for="cpf">CPF</label>
    <input type="text" id="cpf">
    <br>
    <label for="rg">RG</label>
    <input type="text" id="rg">
    <br>
    <input style="color: #0026ff" type="button" id="validar" value="Validar !" />
    <br />
    <span id="validacao">Campos Inválidos<br /></span>
</form>

1 Resposta 1

0

Tens de limpar o html desse campo antes de colocar de novo o que ainda está em falta. Usando $("#validacao").html('') apagas o conteúdo antigo.

Podes fazer isso assim:

$(document).ready(function() {
    var $validacao = $("#validacao");
    $("#validar").click(function() {
        $validacao.html('');
        $("input").each(function(index, element) {
            if (!element.value.trim()) {
                $validacao.append(element.id + "<br>");
            }
        });
    });
});

jsFiddle: https://jsfiddle.net/hmd7s2bw/

$(document).ready(function() {
    var $validacao = $("#validacao");
    $("#validar").click(function() {
        $validacao.html('');
        $("input").each(function(index, element) {
            if (!element.value.trim()) {
                $validacao.append(element.id + "<br>");
            }
        });
    });
});
div {
    width: 40px;
    height: 40px;
    margin: 5px;
    float: left;
    border: 2px blue solid;
    text-align: center;
}

span {
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label for="nome">Nome</label>
    <input type="text" id="nome">
    <br>
    <label for="cpf">CPF</label>
    <input type="text" id="cpf">
    <br>
    <label for="rg">RG</label>
    <input type="text" id="rg">
    <br>
    <input style="color: #0026ff" type="button" id="validar" value="Validar !" />
    <br />
    <span id="validacao">Campos Inválidos<br /></span>
</form>

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 .