How do I revalidate an input whenever a number is changed?

Asked

Viewed 63 times

1

Hello,

The code below checks whether what was entered in the input is greater than or equal to 10 and less than the available value : 100.51. If it’s real, the button needs to turn all black. The problem is that when you type R$90.00 for example, the validation ends up being circumvented. But if you give a Ctrl + c and paste in the input the validation is applied.

Is there any way whenever something is typed give a "Refresh" in javascript? 

function maskIt(w,e,m,r,a){    
    // Cancela se o evento for Backspace
    if (!e) var e = window.event
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;        
    // Variáveis da função
    var txt  = (!r) ? w.value.replace(/[^\d]+/gi,'') : w.value.replace(/[^\d]+/gi,'').reverse();
    var mask = (!r) ? m : m.reverse();
    var pos  = (a ) ? a.pos : "";
    var ret  = "";
    if(code == 9 || code == 8 || txt.length == mask.replace(/[^#]+/g,'').length) return false;
    // Loop na máscara para aplicar os caracteres
    for(var x=0,y=0, z=mask.length;x<z && y<txt.length;){
        if(mask.charAt(x)!='#'){
            ret += mask.charAt(x); x++;
        } else{
            ret += txt.charAt(y); y++; x++;
        }
    }   
    // Retorno da função
    ret = (!r) ? ret : ret.reverse()    
   if (w.value.match("-")){
        w.value = "-"+ret+pos;
    }else{
        w.value = ret+pos;
    }
}
// Novo método para o objeto 'String'
String.prototype.reverse = function(){
    return this.split('').reverse().join('');
};
//desabilita o botão no início
document.getElementById("botao").disabled = true;
//cria um event listener que escuta mudanças no input
document.getElementById("valordigitado").addEventListener("input", function(event){
  //busca conteúdo do input
    var valordispo = 100.51;
    var valorsolicitado = document.getElementById("valordigitado").value;
    var valorsolicitado = valorsolicitado.replace(",", ".");
    let valorsoli = Number(valorsolicitado);
    if (valorsoli >= 10 && valorsoli <= valordispo) { // O valor esta OK!
    //include "m3.html";
   // document.write(valorsoli);
    document.getElementById("botao").disabled = false;
    } else {
    document.getElementById("botao").disabled = true;
    }
});
<html>
<head>
	<title></title>
</head>
<body>
<style type="text/css">
.button{background-color: black}
</style>
<input type="text" name="dinheiro" id="valordigitado" onkeyup="maskIt(this,event,'###.###.###,##',true,{pos:''})" class="line-animation" maxlength="7" step="0.01" autocomplete="off">
<button class="button" id="botao">Enviar</button>
</body>
</html>

javascript input

  • To fire something whenever something is typed in the input, you can use the event keyup

  • One of the problems I just identified is after 6 digits NAN appears on the.log console, as I need to somehow leave replace up to 999.99

1 answer

0


use the "change event":

document.getElementById("valordigitado").addEventListener('change',function(event){
  //código
});

  • Thank you so much for your reply! It worked!

  • Now it remains to figure out how to leave the correct value variable in replace, because there are no numbers with two points, example 1.1111.11 need to limit replace to Té 999.99

  • uses the function "parseFloat(number)" to do this, it will transform the number into decimal.

  • Thank you very much!!! This morning I was able to find the solution for this conversion:

  • var variable = parseFloat(value.replace(/[ 0-9,]*/g, '). replace(',', '.')). toFixed(2);

  • Yay !!!! still well, I was suspecting even that my solution might not be the best one.

Show 1 more comment

Browser other questions tagged javascript input

You are not signed in. Login or sign up in order to post.