Use 2 Onkeyup in the same Input

Asked

Viewed 163 times

0

I got a Javascript code that fits me perfectly, but it is divided to be used in two inputs, but I need him to be executed in it input.

Below is the code. It runs in the event OnKeyUp, then I wonder if there is the possibility to run the script below in the same input?

function mascara_data(data)
{
    var mydata = '';
    mydata = mydata + data;
    if (mydata.length == 2)
    {
        mydata = mydata + '/';
        document.forms[0].data.value = mydata;
    }
    if (mydata.length == 5)
    {
        mydata = mydata + '/';
        document.forms[0].data.value = mydata;
    }
    if (mydata.length == 10)
    {
        verifica_data();
    }
}

function verifica_data()
{

    dia = (document.forms[0].data.value.substring(0, 2));
    mes = (document.forms[0].data.value.substring(3, 5));
    ano = (document.forms[0].data.value.substring(6, 10));

    situacao = "";
    // verifica o dia valido para cada mes 
    if ((dia < 01) || (dia < 01 || dia > 30) && (mes == 04 || mes == 06 || mes == 09 || mes == 11) || dia > 31)
    {
        situacao = "falsa";
    }

    // verifica se o mes e valido 
    if (mes < 01 || mes > 12)
    {
        situacao = "falsa";
    }

    // verifica se e ano bissexto 
    if (mes == 2 && (dia < 01 || dia > 29 || (dia > 28 && (parseInt(ano / 4) != ano / 4))))
    {
        situacao = "falsa";
    }

    if (document.forms[0].data.value == "")
    {
        situacao = "falsa";
    }

    if (situacao == "falsa")
    {
        alert("Data inválida!");
        document.forms[0].data.focus();
    }
}

function mascara_hora(hora)
{
    var myhora = '';
    myhora = myhora + hora;
    if (myhora.length == 2)
    {
        myhora = myhora + ':';
        document.forms[0].hora.value = myhora;
    }
    if (myhora.length == 5)
    {
        verifica_hora();
    }
}

function verifica_hora()
{
    hrs = (document.forms[0].hora.value.substring(0, 2));
    min = (document.forms[0].hora.value.substring(3, 5));

    alert('hrs ' + hrs);
    alert('min ' + min);

    situacao = "";
    // verifica data e hora 
    if ((hrs < 00) || (hrs > 23) || (min < 00) || (min > 59))
    {
        situacao = "falsa";
    }

    if (document.forms[0].hora.value == "")
    {
        situacao = "falsa";
    }

    if (situacao == "falsa")
    {
        alert("Hora inválida!");
        document.forms[0].hora.focus();
    }
}
javascript html

  • I did not understand your question very well, try to specify more and post the HTML code.

  • this above code I can call <input type="text" name="data" Onkeyup="mascara_data(this.value);" maxlength="10"> dd/mm/yyyy<br> <input type="text" name="data" Onkeyup="mascara_hora(this.value);" maxlength="10"> hh:mm<br> so it works, m need to validate these two inputs in one, so I need to type dd/mm/yyyy hh:mm, and it validates the time, because today I use Mask but Mask does not validate time, it means I can type 28:70, which the input accepts, but as JS above I get this validation.

  • Both inputs have the same name?

  • no, I misspelled, but I do not want two inputs I would like to use in a single this function.

1 answer

0


Create another function that will send the data to the other 4 functions. This function will also be in charge of validating the data, IE, do not need to call the functions that verify within the functions of the masks (so I left the excerpts of the code commented with //, that you can erase them).

Now, as an extra, I created a validation with Regex to check if the entered value is in the format dd/mm/aaaa hh:mm (only numbers). See:

function valida_data(datahora){
   
   var formato = /^\d{2}\/\d{2}\/\d{4}\s\d{2}:\d{2}$/.test(datahora);
   
   if(datahora.length < 10){
      mascara_data(datahora);
   }else{
      verifica_data();
   }
   
   if(datahora.length >= 13 && datahora.length < 16){
      mascara_hora(datahora.substr(11));
   }else if(datahora.length == 16){
      verifica_hora();
   }
   
   if(datahora.length == 16 && !formato){
      alert("formato inválido");
   }
   
}

function mascara_data(data)
{
    var mydata = '';
    mydata = mydata + data;
    if (mydata.length == 2)
    {
        mydata = mydata + '/';
        document.forms[0].data.value = mydata;
    }
    if (mydata.length == 5)
    {
        mydata = mydata + '/';
        document.forms[0].data.value = mydata;
    }
//    if (mydata.length == 10)
//    {
//        verifica_data();
//    }
}

function verifica_data()
{

    dia = (document.forms[0].data.value.substring(0, 2));
    mes = (document.forms[0].data.value.substring(3, 5));
    ano = (document.forms[0].data.value.substring(6, 10));

    situacao = "";
    // verifica o dia valido para cada mes 
    if ((dia < 01) || (dia < 01 || dia > 30) && (mes == 04 || mes == 06 || mes == 09 || mes == 11) || dia > 31)
    {
        situacao = "falsa";
    }

    // verifica se o mes e valido 
    if (mes < 01 || mes > 12)
    {
        situacao = "falsa";
    }

    // verifica se e ano bissexto 
    if (mes == 2 && (dia < 01 || dia > 29 || (dia > 28 && (parseInt(ano / 4) != ano / 4))))
    {
        situacao = "falsa";
    }

    if (document.forms[0].data.value == "")
    {
        situacao = "falsa";
    }

    if (situacao == "falsa")
    {
        alert("Data inválida!");
        document.forms[0].data.focus();
    }
}

function mascara_hora(hora)
{
    var myhora = '';
    myhora = myhora + hora;
    if (myhora.length == 2)
    {
        myhora = myhora + ':';
        document.forms[0].data.value = document.forms[0].data.value.substr(0,11) + myhora;
    }
//    if (myhora.length == 5)
//    {
//        verifica_hora();
//    }
}

function verifica_hora()
{
    hrs = (document.forms[0].data.value.substring(11, 13));
    min = (document.forms[0].data.value.substring(14, 16));

    alert('hrs ' + hrs);
    alert('min ' + min);

    situacao = "";
    // verifica data e hora 
    if ((hrs < 00) || (hrs > 23) || (min < 00) || (min > 59))
    {
        situacao = "falsa";
    }

    if (document.forms[0].data.value == "")
    {
        situacao = "falsa";
    }

    if (situacao == "falsa")
    {
        alert("Hora inválida!");
        document.forms[0].data.focus();
    }
}
<form>
   <input type="text" name="data" OnKeyUp="valida_data(this.value);" maxlength="16"> dd/mm/aaaa hh:mm<br>
</form>

  • Sam thank you very much, it was perfect was just that, but only has a problem after the error alert in the field, the input allows me to keep the date with the error, it would be like it to clear the field if the field is in error?

  • It does. Just put document.forms[0].data.value = '' where you want me to clear the field.

  • Thank you very much Sam, it worked....

Browser other questions tagged javascript html

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