0

Consegui um código JavaScript que me atende perfeitamente, mas ele está dividido para ser usado em dois inputs, mas preciso que ele seja executado no mesmo input.

Segue abaixo o código. Ele é executado no evento OnKeyUp, então gostaria de saber se existe a possibilidade de executar o script abaixo no mesmo 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();
    }
}
4
  • Não entendi muito bem sua dúvida, tente especificar mais e postar o código HTML. 10/04/2019 às 14:42
  • este código acima eu consigo chamar <input type="text" name="data" OnKeyUp="mascara_data(this.value);" maxlength="10"> dd/mm/aaaa<br> <input type="text" name="data" OnKeyUp="mascara_hora(this.value);" maxlength="10"> hh:mm<br> assim ele funciona, m as preciso que ele valide esses dois inputs em um só, então necessito digitar dd/mm/yyyy hh:mm, e ele valide a hora, porque hoje utilizo mask mas o mask não valida hora, isso significa que posso digitar 28:70, que o input aceita, mas como JS acima consigo essa validação. 10/04/2019 às 14:44
  • Os dois inputs tem o mesmo name?
    – Meu ovo
    10/04/2019 às 16:00
  • não, eu escrevi errado, mas não quero dois inputs gostaria de usar em um só essa função. 10/04/2019 às 16:52

1 Resposta 1

0

Crie uma outra função que irá enviar os dados para as outras 4 funções. Essa função também irá se encarregar de validar os dados, ou seja, não precisa chamar as funções que verificam dentro das funções das máscaras (por isso deixei os trechos do código comentado com //, que você pode apagá-los).

Agora, como um extra, criei uma validação com RegEx para verificar se o valor digitado é no formato dd/mm/aaaa hh:mm (apenas números). Veja:

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>

3
  • Sam muito obrigado, ficou perfeito era isso mesmo, mas só tem um problema após o alerta de erro no campo, o input permite que eu mantenho a data com o erro, teria como ele fazer um clear no campo caso a o campo estiver com erro? 10/04/2019 às 18:03
  • Tem. É só colocar document.forms[0].data.value = '' onde vc quiser que limpe o campo.
    – Meu ovo
    10/04/2019 às 19:29
  • Sam muitíssimo obrigado, deu certo.... 10/04/2019 às 20:12

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 .