4

Hoje comecei a tentar transformar uma função que estou usando em jQuery (que o @José me ajudou implementar nesta resposta) a .on, para JavaScript puro, mas estou enfrentando algumas dificuldades. Os cursos on line que já fiz não abordaram este aspecto, então se a solução viesse acompanhada de uma boa explicação seria ideal.

O código em jQuery é este:

$('.checar').on('validation', function(evt, valid) {
    var validou = document.getElementById('validou').value = valid ? "true" : "false";

    if (validou === "true") {
        $('#startBtnseg').removeAttr('disabled');
    }
});

Esse código faz a validação de uma data, utilizando os parâmetros retornados pelo form.validator, e se a data é validada, ele retira o disabled do button.

Estou tentando utilizar addEventListener(), mas não está funcionando.

Fiz um FIDDLE pra demonstrar o problema, e basta retirar o jQuery (apagar ou comentar) pra ver que o Javascript puro passa a habilitar o botão normalmente, mas se o jQuery está junto, daí não funciona.

Eu não preciso que ele utilize classe ('checar'), porque quero usar este script em conjunto com outro, que já vem funcionando para a mesma coisa (retirar o disabled do mesmo botão), este em JavaScript puro (que eu adaptei do script que @Sérgio escreveu nesta resposta).

Separadamente os dois scripts funcionam perfeitamente, mas quando os dois estão presentes, o de javascript puro não faz diferença, e se valida o código jQuery, então ele abre o button (não importando que a condição do JavaScript puro não esteja cumprida).

O quero é "fundir" estes dois scripts, mas gostaria também de entender o processo de conversão da função para Javascript puro, se fosse possível.

O código JavaScript puro da outra validação:

var datainicial = document.getElementById('Cinsem');
var datafinal = document.getElementById('Cdesl22');

function formatar(mascara, documento) {
    var i = documento.value.length;
    var saida = mascara.substring(0, 1);
    var texto = mascara.substring(i);
    if (texto.substring(0, 1) != saida) {
        documento.value += texto.substring(0, 1);
    }
    verificar();
}

function gerarData(str) {
    var partes = str.split("/");
    return new Date(partes[2], partes[1] - 1, partes[0]);
}

function verificar() {
    var inicio = datainicial.value;
    var fim = datafinal.value;

    if (inicio.length != 10 || fim.length != 10) {
        return;
    }
    if (gerarData(fim) >= gerarData(inicio)) {
        $('#startBtnseg').removeAttr('disabled', 'disabled');
    }
}
0

1 Resposta 1

4

Normalmente converter do on para JavaScript nativo é simples - para cada evento tratado pelo on (ex.: click, blur, keyup) há uma funcionalidade nativa correspondente (ex.: onclick, onblur, onkeyup); pode-se então atribuir uma função tratadora (handler) aos elementos desejados (ou a algum ancestral comum dos mesmos, no espírito da função on) ou usar addEventListener, como sugerido na própria pergunta.

Entretanto, esse validate implementado pelo plugin form.validator não tem um correspondente nativo que possa ser facilmente chamado [que eu saiba]. Para implementar uma funcionalidade equivalente, só mesmo vendo o que o plugin faz (talvez estudando seu código fonte) e fazendo igual ou parecido. De modo que não tenho uma resposta pra te dar nesse caso.

Entretanto, se for só para garantir que ambas as verificações (formato e lógica customizada) sejam feitas, pode-se dar um jeito. Não conheço o form.validator com detalhes, então não sei qual a melhor forma de fazer isso (com certeza tem algo na API pra te ajudar). Mas uma maneira - nem um pouco "polida", entretanto - é modificar seu formatar para ativar (trigger) programaticamente o validate, e no próprio validate chamar o seu método verificar:

on('validation', function (evt, valid) {
    var validou =  document.getElementById('validou').value = valid ? "true" : "false";

    if (validou === "true") {
        verificar(); // Chama o verificar também, em vez de liberar o botão
    }
});

...

function formatar(mascara, documento) {
    var i = documento.value.length;
    var saida = mascara.substring(0, 1);
    var texto = mascara.substring(i);
    if (texto.substring(0, 1) != saida) {
        documento.value += texto.substring(0, 1);
    }
    $(documento).validate(); // trigger no validate
}

O resultado é que o botão só se tornará habilitado quando ambas as condições forem satisfeitas. Exemplo no jsFiddle.

1
  • 1
    Nossa, excelente resposta! O primeiro e o terceiro objetivos (fazer ambas as validações e APRENDER NO PROCESSO) estão satisfeitos! :-) Pelo que vc explicou não é a melhor prática, então vou me segurar pra não clicar no resolvido :-), e deixar aberta por enquanto, vai que aparece alguém pra contribuir ainda mais né. Valeu demais cara! Muito sucesso pra ti! Abraços!
    – gustavox
    11/06/2015 às 2:22

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 .