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');
}
}