none
Máscara javascript! RRS feed

  • Pergunta

  • Fala Galera, tudo bem com vocês?

    Estou trabalhando com javascript há pouco tempo e ainda tenho algumas dificuldades. 

    Eu precisaria de uma validação bem simples para quem já trabalha com isso.

    A função deverá mascarar o TextBox assim --> "2014/2015" Mask: YYYY/YYYY

    E emitir uma mensagem de erro caso a primeira data seja maior que a segunda. "2015/2014"

    Por não ter experiência, não sei também se coloca no Onblur, OnTextChanged, OnKeyUP, OnKeyDown etc...

    Preciso do Javascript e não jQuery!

    Alguém pode ajudar?

    Obrigado!


    Se o meu conteúdo resolveu o seu problema ou sua dúvida, então marque como "Resposta", ou se foi útil, "Vote". Pois isso ajudará outras pessoas com o mesmo problema ou dúvida.

    sexta-feira, 24 de outubro de 2014 18:26

Respostas

  • Segue exatamente conforme pediu, rs:

       <script type="text/javascript">
            //adiciona mascara de data
            function MascaraData(data) {
                if (mascaraInteiro(data) == false) {
                    event.returnValue = false;
                }
                return formataCampo(data, '0000/0000', event);
            }
    
            //formata de forma generica os campos
            function formataCampo(campo, Mascara, evento) {
                var boleanoMascara;
    
                var Digitato = evento.keyCode;
                exp = /\-|\.|\/|\(|\)| /g
                campoSoNumeros = campo.value.toString().replace(exp, "");
    
                var posicaoCampo = 0;
                var NovoValorCampo = "";
                var TamanhoMascara = campoSoNumeros.length;;
    
                if (Digitato != 8) { // backspace 
                    for (i = 0; i <= TamanhoMascara; i++) {
                        boleanoMascara = ((Mascara.charAt(i) == "-") || (Mascara.charAt(i) == ".")
                                            || (Mascara.charAt(i) == "/"))
                        boleanoMascara = boleanoMascara || ((Mascara.charAt(i) == "(")
                                            || (Mascara.charAt(i) == ")") || (Mascara.charAt(i) == " "))
                        if (boleanoMascara) {
                            NovoValorCampo += Mascara.charAt(i);
                            TamanhoMascara++;
                        } else {
                            NovoValorCampo += campoSoNumeros.charAt(posicaoCampo);
                            posicaoCampo++;
                        }
                    }
                    campo.value = NovoValorCampo;
                    return true;
                } else {
                    return true;
                }
            }
    
            //valida numero inteiro com mascara
            function mascaraInteiro() {
                if (event.keyCode < 48 || event.keyCode > 57) {
                    event.returnValue = false;
                    return false;
                }
                return true;
            }
    
            function validaDatas(campoData) {
                if (campoData.value.length == 9) {
                    var data = campoData.value;
                    var datas = data.split("/");
                    var primeiraData = parseInt(datas[0]);
                    var segundaData = parseInt(datas[1]);
                    if (primeiraData > segundaData)
                        alert("A primeira data é maior do que a segunda!");
    
                } else {
                    alert("O campo não está no formato correto!");
                }
            }
        </script>
    
        <input type="text" name="data" onkeyup="return MascaraData(this);" onblur="validaDatas(this);" maxlength="9" />
    Marque como resposta se foi útil!

    • Sugerido como Resposta Deric Ferreira sexta-feira, 24 de outubro de 2014 19:13
    • Marcado como Resposta Alvesanderson sexta-feira, 24 de outubro de 2014 19:20
    sexta-feira, 24 de outubro de 2014 19:12

Todas as Respostas

  • Olá,

    Você pode pesquisar por estes 2 plugins que funcionam com o jQuery:

    • jquery.maskedinput-1.1.4.pack.js
    • jquery.validarium.js

    Exemplo de HTML:

    Baixe os plugin acima e depois adicione as referências no HEAD (não se esqueça de incluir seu jQuery antes deles)

    <script src="jquery.maskedinput-1.1.4.pack.js"></script>
    <script type="text/javascript" src="jquery.validarium.js" charset="ISO-8859-1"></script>

    No body adicione um form e seu elemento de data, etc. No exemplo abaixo o atributo data-rules-required=true indica que o campo é obrigatório. No JS depois da declaração do elemento é onde definimos a máscara de data. Por fim, depois do form o JS que marca que seu form será validado pela api validarium antes de ser submetido:

    <form action="#" id="frmIncluir" method="post">
    
    <input class="text-box single-line" id="DataDeAbertura" name="DataDeAbertura" type="text" value="" data-rules-required="true" data-rule-number="false" title="Data de Abertura" />
    
     <script type="text/javascript">$("#DataDeAbertura").mask("99/99/9999");</script>
    
    </form>
    
     <script type="text/javascript">$("#frmIncluir").validarium(); </script>
    

    Marque como resposta se foi útil!


    • Sugerido como Resposta Deric Ferreira sexta-feira, 24 de outubro de 2014 18:42
    • Não Sugerido como Resposta Alvesanderson sexta-feira, 24 de outubro de 2014 18:46
    sexta-feira, 24 de outubro de 2014 18:42
  • Oi Deric, sua solução não me atende!

    Precisa ser exatamente como perguntei!


    Se o meu conteúdo resolveu o seu problema ou sua dúvida, então marque como "Resposta", ou se foi útil, "Vote". Pois isso ajudará outras pessoas com o mesmo problema ou dúvida.

    sexta-feira, 24 de outubro de 2014 18:47
  • Segue exatamente conforme pediu, rs:

       <script type="text/javascript">
            //adiciona mascara de data
            function MascaraData(data) {
                if (mascaraInteiro(data) == false) {
                    event.returnValue = false;
                }
                return formataCampo(data, '0000/0000', event);
            }
    
            //formata de forma generica os campos
            function formataCampo(campo, Mascara, evento) {
                var boleanoMascara;
    
                var Digitato = evento.keyCode;
                exp = /\-|\.|\/|\(|\)| /g
                campoSoNumeros = campo.value.toString().replace(exp, "");
    
                var posicaoCampo = 0;
                var NovoValorCampo = "";
                var TamanhoMascara = campoSoNumeros.length;;
    
                if (Digitato != 8) { // backspace 
                    for (i = 0; i <= TamanhoMascara; i++) {
                        boleanoMascara = ((Mascara.charAt(i) == "-") || (Mascara.charAt(i) == ".")
                                            || (Mascara.charAt(i) == "/"))
                        boleanoMascara = boleanoMascara || ((Mascara.charAt(i) == "(")
                                            || (Mascara.charAt(i) == ")") || (Mascara.charAt(i) == " "))
                        if (boleanoMascara) {
                            NovoValorCampo += Mascara.charAt(i);
                            TamanhoMascara++;
                        } else {
                            NovoValorCampo += campoSoNumeros.charAt(posicaoCampo);
                            posicaoCampo++;
                        }
                    }
                    campo.value = NovoValorCampo;
                    return true;
                } else {
                    return true;
                }
            }
    
            //valida numero inteiro com mascara
            function mascaraInteiro() {
                if (event.keyCode < 48 || event.keyCode > 57) {
                    event.returnValue = false;
                    return false;
                }
                return true;
            }
    
            function validaDatas(campoData) {
                if (campoData.value.length == 9) {
                    var data = campoData.value;
                    var datas = data.split("/");
                    var primeiraData = parseInt(datas[0]);
                    var segundaData = parseInt(datas[1]);
                    if (primeiraData > segundaData)
                        alert("A primeira data é maior do que a segunda!");
    
                } else {
                    alert("O campo não está no formato correto!");
                }
            }
        </script>
    
        <input type="text" name="data" onkeyup="return MascaraData(this);" onblur="validaDatas(this);" maxlength="9" />
    Marque como resposta se foi útil!

    • Sugerido como Resposta Deric Ferreira sexta-feira, 24 de outubro de 2014 19:13
    • Marcado como Resposta Alvesanderson sexta-feira, 24 de outubro de 2014 19:20
    sexta-feira, 24 de outubro de 2014 19:12
  • Muito obrigado!

    Se o meu conteúdo resolveu o seu problema ou sua dúvida, então marque como "Resposta", ou se foi útil, "Vote". Pois isso ajudará outras pessoas com o mesmo problema ou dúvida.

    sexta-feira, 24 de outubro de 2014 19:20