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

Question

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

Navigation

#1 by (1 votes)

3

Js is a great ally, but for those who know better, I'm having a hard time in a simple system that is a cpf validation, I'd like it to be worth js to remove the label with the invalid class and be 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>

javascript

asked by anonymous 09.07.2016 / 12:54

1 answer

How do I get the client's position on the map? Python - selenium send_keys () does not work in this form field

score 1 · Accepted Answer

It will, but not because you are confusing the label identifier with the label elements in the HTML. In that case you would have to use the methods of the DOM to get all elements label to later modify them. There are more methods than these, but they are useful:

document.getElementsByTagName . Returns all elements with the name of the tag specified in the first parameter, within an array. If you have a container, index getElementsByTagName on it. Element.prototype.getElementsByTagName
document.querySelectorAll . Returns all elements within an array with a syntax for requesting elements (ex: '.class .wow label' ) used in CSS (that is, interpreted), specified in the first parameter. This method can be indexed into an element, too. Element.prototype.querySelectorAll

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 change this variable. This variable is an array, but it has its prototype (I believe it is HTMLCollection ), too. This variable contains the label elements that can be indexed by numbers and thus modified.

To modify all elements label at one time, you will have to do a repeat execution. 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 will 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 you want 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.