In JS label.removeClass(); will you do what I want?

Question

Js is a great ally, but for those who know best to use it, I’m having great difficulty in a simple system that is a validation of Cpf, I would like that when being validated js removes the label with the invalid class and when being invalid it removes the label with the valid class.

Include JS Already Included.

js Code:

<script>
$(function(){

    // ## EXEMPLO 1
    // Aciona a validação a cada tecla pressionada
    var temporizador = false;
    $('.cpf_cnpj').keypress(function(){

        // O input que estamos utilizando
        var input = $(this);

        // Limpa o timeout antigo
        if ( temporizador ) {
            clearTimeout( temporizador );
        }

        // Cria um timeout novo de 500ms
        temporizador = setTimeout(function(){
            // Remove as classes de válido e inválido
            label.removeClass('valido');
            label.removeClass('invalido');

            // O CPF ou CNPJ
            var cpf_cnpj = input.val();

            // Valida
            var valida = valida_cpf_cnpj( cpf_cnpj );

            // Testa a validação
            if ( valida ) {
                label.addClass('valido');
            } else {
               label.addClass('invalido');
            }
        }, 500);

    });
});
 </script>

HTML CODE:

<label for="Cpf" class="valido" style="display:none">Valido</label>
<label for="Cpf" class="invalido" style="display:none">Invalido</label>

Answer 1

It will, but not because you’re confusing the handle label with the elements label in HTML. In this case you would have to use DOM methods to get all elements label and then modify them. There are more methods than these, but they are useful:

• document.getElementsByTagName. Returns all elements with the tag name specified in the first parameter, within an array. If you have a container, index getElementsByTagName in it. Element.prototype.getElementsByTagName

• document.querySelectorAll. Returns all elements within an array with a syntax to request elements (e.g.: '.class .wow label') used in CSS (i.e., interpreted), specified in the first parameter. This method can be indexed in an element, too. Element.prototype.querySelectorAll

The document.getElementsByTagName should have better support, so try to use it to get all label in your HTML:

var labels = document.getElementsByTagName('label');

First of all, nothing will happen if you modify this variable. This variable is an array, but it has its prototype (I believe it is HTMLCollection), also. This variable contains the elements label which can be indexed by numbers and thus modified.

To modify all elements label at once, you will have to do a repeated run. Use for(expressão inicial; condição; ação) it’s very simple.

Then, when your form is validated or invalidated, you can make a condition to generate the string "valido" or "invalido" and use it in the "class" attribute of each label. If you have another class included, you have to add it together.

var result = valida ? "valido" : "invalido",
    labels = document.getElementsByTagName('label');

for(var i = 0, el; el = labels[i]; i ++) el.className = result;

Or if you prefer, add or remove one of the classes as you wanted to do (best if you have multiple classes).

var addClass = valida ? "valido" : "invalido",
    removeClass = valida ? "invalido" : "valido",
    labels = document.getElementsByTagName('label');

for(var i = 0, el; el = labels[i]; i ++) {
    el.removeClass(removeClass);
    el.className += " " + addClass;
}

You do this after creating the variable valida on your block.