javascript – In JS label.removeClass(); Will you do what I want?

Question:

Js is a great ally, but for those who know better how to use it, I'm having great difficulty in a simple system that is a cpf validation, I would like that when js is valid it removes the label with the invalid class and when it is invalid remove 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:

It will, but not because you're confusing the label identifier with the label elements in HTML. In that case you would have to use the DOM methods to get all the label elements 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, inside an array. If you have a container, index getElementsByTagName it. Element.prototype.getElementsByTagName

  • document.querySelectorAll . Returns all elements within an array with a syntax for requesting elements (eg '.class .wow label' ) used in CSS (ie interpreted), specified in the first parameter. This method can be indexed on an element, too. Element.prototype.querySelectorAll

document.getElementsByTagName should have better support, so try using 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's HTMLCollection ), too. This variable contains the label elements that can be indexed by numbers and thus modified.

To modify all label elements at once, you will have to do a repeat run. Using for(expressão inicial; condição; ação) is 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'll have to add it along.

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 several 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 valida variable in your block.

Post Views: 0
Scroll to Top