How to convert jQuery .on function to pure JavaScript

Question

How to convert jQuery .on function to pure JavaScript

Navigation

#1 by (4 votes)

4

Today I started trying to transform a function that I'm using in jQuery (which @ Jose helped me implement in this answer ) to .on , for pure JavaScript, but I'm facing some difficulties. The online courses I have already done did not address this aspect, so if the solution came with a good explanation it would be ideal.

The code in jQuery is this:

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

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

This code validates a date, using the parameters returned by form.validator , and if the date is validated, it removes the date disabled of button .

I'm trying to use addEventListener() , but it's not working.

I did a FIDDLE to demonstrate the problem, and just remove jQuery (delete or comment) to see that the Pure Javascript will enable the button normally, but if jQuery is together, that does not work.

I do not need it to use class ('check'), because I want to use this script in conjunction with another, which already works for the same thing (remove disabled from the same button), this in pure JavaScript which I adapted from the script that @Sergio wrote in this answer ).

Separately the two scripts work perfectly, but when the two are present, the pure javascript does not make a difference, and validates the jQuery code, so it opens button (no matter that the pure JavaScript condition is not fulfilled).

I want to "merge" these two scripts, but I would also like to understand the process of converting the function to pure Javascript, if at all possible.

The pure JavaScript code of the other validation:

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

javascript html jquery html5

asked by anonymous 11.06.2015 / 02:34

1 answer

Create primary key in a table that already exists in sqlserver Method Object.values () does not work in internet explorer 9

score 4 · Accepted Answer

Normally converting from on to native JavaScript is simple - for every event handled by on (ex: click , blur , keyup ) there is a corresponding native functionality %, onclick , onblur ); you can assign a handler function to the desired elements (or some common ancestor of them, in the spirit of the onkeyup function) or use on , as suggested in the question itself.

However, this addEventListener implemented by the validate plugin does not have a native match that can be easily called [as far as I know]. To implement equivalent functionality, just by seeing what the plugin does (perhaps by studying its source code) and doing the same or similar. So I do not have an answer to give you that case.

However, if you just want to make sure that both checks (format and custom logic) are done, you can fix it. I do not know form.validator with details, so I do not know how best to do this (surely there's something in the API to help you). But one way - not a bit "polite", however - is to modify its form.validator to trigger ( trigger ) programmatically the formatar , and in the validate itself itself your validate method:

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
}

The result is that the button will only become enabled when both conditions are satisfied. Example in jsFiddle .