6

Estou utilizando um script* para habilitar um botão quando duas validações forem feitas. A primeira verifica o formato, e a segunda se a data inicial é menor que a final, mas estou com alguns problemas pra incluir mais campos com as mesmas funcionalidades, e corrigir algumas inconsistências.

Criei um FIDDLE pra demonstrar o funcionamento na prática, e segue abaixo o código com exemplo verificável. O script já faz a validação (tanto a formatação quanto a comparação) antes de abrir o botão, mas:

  • Só funciona quando perde o foco, queria que fosse como com onkeyup (quando soltar a tecla), mas se não tiver jeito pode ser só quando perde o foco mesmo;
  • Se o usuário, após o botão ter sido aberto, mudar a data para um formato inválido (ou que fique menor que outro que deveria ser maior), o botão não é desabilitado (e preciso que seja). Preciso que não seja possível o usuário "passar de tela" (trocar de div, veja no fiddle) sem o formato estar correto, e observar a condição de data inicial < data final;
  • A última data, que faz a comparação com a segunda, chega a abrir a div com a mensagem de erro (quando a data é menor ou está no formato errado), mas mesmo assim envia o formulário (o que não era pra ocorrer);
  • O campo aceita letras, e só depois que perde o foco ele dá a mensagem que o formato está errado. Queria que o campo não aceitasse letras, apenas números (é possível fazer com RegExp não?) nem mesmo a / o que causa problemas porque o usuário às vezes tenta digitá-la.

Estou aberto a outras soluções, inclusive com plugins diferentes do que estou usando pra verificar a formatação, mas já adianto que percorri um longo caminho procurando outra solução e não achei. Ou bem o plugin/script valida a formatação, ou bem valida a comparação das datas, e preciso das duas coisas.

Segue o código:

    // VALIDAÇÃO DO FORMATO PELO FORM.VALIDATOR

// Chama o form.validator

    $.validate({
        modules: 'date'
    });

    // Cria uma classe que verifica se o form.validator foi true, e abre o botão.

    $('.checar')

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

                /* Verifica SE a data está OK */

                if (validou === "true") {
                    verificar(); // chama o script abaixo antes de abrir o botão se o formato está correto
                }
            });


    //VALIDA DATAS EM COMPARAÇÕES 

    var primeiradata = document.getElementById('Cinsem');
    var segundadata = document.getElementById('Cdesl22');
    var terceiradata = document.getElementById('Cinsem2');
    var quartadata = document.getElementById ('Cdesl223');
    var quintadata = document.getElementById('Cdatapgtos');

    function gerarData(str) {
        var partes = str.split("/");
        return new Date(partes[2], partes[1] - 1, partes[0]);
    }

    function verificar() {
        var primeira = primeiradata.value;
        var segunda = segundadata.value;
        var terceira = terceiradata.value;
        var quarta = quartadata.value;
        var quinta = quintadata.value;

        // PRIMEIRA DATA X SEGUNDA DATA

        if (primeira.length != 10 || segunda.length != 10) {
            return;
        }
        if (gerarData(segunda) >= gerarData(primeira)) {
            $('#startBtnseg').removeAttr('disabled', 'disabled');
            $('#message1').hide();
        }
        else {
            $('#startBtnseg').attr('disabled', 'disabled');
            $('#message1').fadeIn('slow');
        }
        // TERCEIRA DATA X QUARTA DATA

        if (terceira.length != 10 || quarta.length != 10) {
            return;
        }
        if (gerarData(quarta) >= gerarData(terceira)) {
            $('#startBtnseg2').removeAttr('disabled', 'disabled');
            $('#message2').hide();
        }
        else {
            $('#startBtnseg2').attr('disabled', 'disabled');
            $('#message2').fadeIn('slow');
        }

        //QUINTA DATA X SEGUNDA DATA

        if (quinta.length != 10 || segunda.length != 10){
            return;
        }
        if (gerarData(quinta) < gerarData(segunda)){
            $('#startBtnseg3').attr('disabled', 'disabled');
            $('#message3').fadeIn('slow');
        }
        else {
            $('#startBtnseg3').removeAttr('disabled', 'disabled');
            $('#message3').hide();
        }
    }

  
    <style>
        .message1 {

            font-size: 10pt;
            color: red;
        }
    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>
<form>
    <div class="container textWord_about"  data-link="first">
    <label class="btn" for="Cinsem">
    <i class="glyphicon glyphicon-calendar"></i>Primeira data
    <input class="form-control checar" type="text" maxlength="10" placeholder="dd/mm/aaaa"
           onkeyup="formatar('##/##/####', this, event)" name="Tinsem3" id="Cinsem"
           data-validation="birthdate" data-validation-error-msg="Insira uma data válida"
           data-validation-format="dd/mm/yyyy"></label>
<br><br>
<label class="btn" for="Cdesl22">
    <i class="glyphicon glyphicon-calendar"></i>Segunda data
    <input type="text" class="form-control checar" name="Tdesl"  maxlength="10" data-validation="date"
           data-validation-format="dd/mm/yyyy" data-validation-error-msg="Insira uma data válida" placeholder="dd/mm/aaaa"
           onkeyup="formatar('##/##/####', this, event)" id="Cdesl22"></label>

<!-- Espelho de #aniv1,porém do tipo "date" -->
<label for="Cdesl222"></label>
<input type="date" id="Cdesl222" name="Cdesl22" class="checar" hidden="hidden" />

<!-- Auxilia na validação. Pode ser um DIV também mas precisará alterar o código -->
<label for="validou"></label>
<input type="text" id="validou" name="validou" hidden="hidden" class ="checar" value="false" />

<div class="message1 " id="message1" style="display:none;"><br><br>A segunda data deve ser igual ou posterior à primeira data.</div>
    <br><br>

<button type="button" class="btn btn-primary btn-sm link" id="startBtnseg"  name="TstartBtnseg"
        data-link="dois" onkeyup="verificar()" disabled="disabled">
    <i class="glyphicon glyphicon-ok"> Ir para próximas datas</i></button>
       <br><br>
        A segunda data deve ser <b>igual ou maior</b> que a primeira, e ambas devem estar
        no formato correto (ou seja, não pode aceitar letras, nem mês acima de 13 etc) para abrir o botão.
        Caso o usuário, antes de submeter o formulário (ou depois, se ele voltar) faça qualquer alteração
        que torne o formato inválido, ou torne a data final menor que a inicial, o botão deve ser desabilitado.
        O ideal é que a habilitação/desabilitação do botão seja feita com onkeyup (assim que o usuário
        tirar a pressão da tecla), mas se não tiver jeito pode ser só quando perder o foco mesmo (e eu criaria uma botão
        "falso" para "Checar data", onde o usuário clicaria apenas para o campo perder o foco e realziar a validação).
    <br><br>
</div>
    <div class="container textWord_about"  data-link="dois">
        <label class="btn" for="Cinsem2">
            <i class="glyphicon glyphicon-calendar"></i>Terceira data
            <input class="form-control checar" type="text" maxlength="10" placeholder="dd/mm/aaaa"
                   onkeyup="formatar('##/##/####', this, event)" name="Tinsem3" id="Cinsem2"
                   data-validation="birthdate" data-validation-error-msg="Insira uma data válida"
                   data-validation-format="dd/mm/yyyy"></label>
        <br><br>
        <label class="btn" for="Cdesl223">
            <i class="glyphicon glyphicon-calendar"></i>Quarta data
            <input type="text" class="form-control checar" name="Tdesl"  maxlength="10" data-validation="date"
                   data-validation-format="dd/mm/yyyy" data-validation-error-msg="Insira uma data válida" placeholder="dd/mm/aaaa"
                   onkeyup="formatar('##/##/####', this, event)" id="Cdesl223"></label>

        <!-- Espelho de #aniv1,porém do tipo "date" -->
        <label for="Cdesl222"></label>
        <input type="date" id="Cdesl2223" name="Cdesl223" class="checar" hidden="hidden" />

        <!-- Auxilia na validação. Pode ser um DIV também mas precisará alterar o código -->
        <label for="validou"></label>
        <input type="text" id="validou3" name="validou" hidden="hidden" class ="checar" value="false" />

        <div class="message1" id="message2" style="display:none;"><br><br>A data quarta data deve ser posterior à terceira data.</div>
        <br><br>

        <button type="button" class="btn btn-primary btn-sm link" id="startBtnseg2"
                data-link="tres" onkeyup="verificar()" disabled="disabled">
            <i class="glyphicon glyphicon-ok"> Próximas!</i></button>
        <br><br>
        Igual a primeira tela, considerando entre a terceira e a quarta datas.
    </div>

    <div class="container textWord_about" id="menu_about" data-link="tres">
<label class="btn" for="Cdatapgtos">
    <i class="glyphicon glyphicon-calendar"></i> Quinta data
    <input type="text"  id="Cdatapgtos" name="Tdatapagtos" class="form-control checar" maxlength="10"
           placeholder="dd/mm/aaaa" onkeyup="formatar('##/##/####', this, event)"></label>
<div class="message1 " id="message3" style="display:none;">A quinta data deve ser igual ou posterior à segunda data.</div>
    <br><br>
<button type="submit" id="startBtnseg3" class="btn btn-primary btn-sm" onkeyup="verificar()">
    <i class="glyphicon glyphicon-ok">Submeter formulário</i></button>
        <br><br>
        A quinta data deve ser <b>IGUAL OU POSTERIOR</b> à <b>SEGUNDA DATA</b>, e ambas devem
        estar no formato correto para que o formulário seja submetido. O botão de submeter
        o formulário precisa estar habilitado, e será desabilitado caso as validações não ocorram (formato de data e comparação
        com segunda data). Da mesma forma seria interessante com onkeyup, mas pode ser quando clicar no botão.
        O campo não é obrigatório, mas caso seja preenchido é feita a validação, e habilitado/desabilitado.
        </div>
</form>
        
        <script>      // ALTERNA AS DIV's

  $('.textWord_about').not(':first').hide();
    $('.link').click(function() {
        $('.textWord_about').hide();
        $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn('slow');
    });</script>
        
        <script>
            
// MÁSCARA DOS CAMPOS

function formatar(mascara, documento, e) {
        var code = e.keyCode || e.code;
        if (code == 8 || code == 46 || code == 37 || code == 39) return;
        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);
        }
    }

            
        </script>

Vários usuários aqui do SOpt me ajudaram a implementar esse script. Veja a série de perguntas:

1 Resposta 1

6
+100

Eu acabei removendo algumas partes do seu código que não achei necessário e adicionei alguns <p> para ficar melhor apresentado, além de remover a validação de HTML5.

.message1 {
    font-size: 10pt;
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://pastebin.com/raw.php?i=gE1SbXKA"></script>
<script type="text/javascript" src="http://pastebin.com/raw.php?i=8xvHJBJf" ></script>
<script type="text/javascript" src="http://pastebin.com/raw.php?i=YRhQfUJs"></script>

<form onsubmit="return verifica('data2', 'data5', false, 3);">
    <div class="container textWord_about"  data-link="first">
	
        <p>
            <label class="btn" for="Cinsem">
                <i class="glyphicon glyphicon-calendar"></i>Primeira data
                <input class="form-control checar" id="data1" type="text" maxlength="10"
				       data-funcao="verifica('data1', 'data2', true, 1);">
            </label>
        </p>
        <p>
            <label class="btn" for="Cinsem">
                <i class="glyphicon glyphicon-calendar"></i>Segunda data
                <input class="form-control checar" id="data2" type="text" maxlength="10"
				       data-funcao="verifica('data1', 'data2', false, 1);">
            </label>
        </p>

        <button type="button" class="btn btn-primary btn-sm link" id="botao1" 
		        data-link="dois" disabled="disabled">
            <i class="glyphicon glyphicon-ok"> OK, vamos continuar!</i>
        </button>
		   
        <p>
            A segunda data deve ser <b>igual ou maior</b> que a primeira, e ambas devem estar
            no formato correto (ou seja, não pode aceitar letras, nem mês acima de 13 etc) para abrir o botão.
            Caso o usuário, antes de submeter o formulário (ou depois, se ele voltar) faça qualquer alteração
            que torne o formato inválido, ou torne a data final menor que a inicial, o botão deve ser desabilitado.
            O ideal é que a habilitação/desabilitação do botão seja feita com onkeyup (assim que o usuário
            tirar a pressão da tecla), mas se não tiver jeito pode ser só quando perder o foco mesmo (e eu criaria uma botão
            "falso" para "Checar data", onde o usuário clicaria apenas para o campo perder o foco e realziar a validação).
        </p>
    </div>
	
    <div class="container textWord_about"  data-link="dois">
	
        <p>
            <label class="btn" for="Cinsem">
                <i class="glyphicon glyphicon-calendar"></i>Terceira data
                <input class="form-control checar" id="data3" type="text" maxlength="10"
				       data-funcao="verifica('data3', 'data4', true, 2);">
            </label>
        </p>
        <p>
            <label class="btn" for="Cinsem">
                <i class="glyphicon glyphicon-calendar"></i>Quarta data
                <input class="form-control checar" id="data4" type="text" maxlength="10"
				       data-funcao="verifica('data3', 'data4', false, 2);">
            </label>
        </p>

        <button type="button" class="btn btn-primary btn-sm link" id="botao2" 
		        data-link="tres" disabled="disabled">
            <i class="glyphicon glyphicon-ok"> OK, vamos continuar!</i>
        </button>
		   
        <p>
            Igual a primeira tela, considerando entre a terceira e a quarta datas.
        </p>
    </div>
	
    <div class="container textWord_about"  data-link="tres">
	
        <p>
            <label class="btn" for="Cinsem">
                <i class="glyphicon glyphicon-calendar"></i>Quinta data
                <input class="form-control checar" id="data5" type="text" maxlength="10"
				       data-funcao="verifica('data2', 'data5', false, 3);">
            </label>
        </p>

        <button type="submit" id="botao3" class="btn btn-primary btn-sm"
		        onclick="return verifica('data2', 'data5', false, 3);">
            Submeter formulário
        </button>
		   
        <p>
            A quinta data deve ser <b>IGUAL OU POSTERIOR</b> à <b>SEGUNDA DATA</b>, e ambas devem
            estar no formato correto para que o formulário seja submetido. O botão de submeter
            o formulário precisa estar habilitado, e será desabilitado caso as validações não ocorram (formato de data e comparação
            com segunda data). Da mesma forma seria interessante com onkeyup, mas pode ser quando clicar no botão.
            O campo não é obrigatório, mas caso seja preenchido é feita a validação, e habilitado/desabilitado.
        </p>
    </div>
	        
    <script>      // ALTERNA AS DIV
        $('.textWord_about').not(':first').hide();
        $('.link').click(function() {
            $('.textWord_about').hide();
            $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn('slow');
        });
    </script>
        
    <script>    // MÁSCARA DOS CAMPOS
        $(document).ready(function(){
            $('.checar').inputmask("dd/mm/yyyy",
                                    {
                                        "oncomplete": function () {
                                            eval($(this).data("funcao"));
                                    }
            });
        });
		
        function gerarData(str) {
            var partes = str.split("/");
            return new Date(partes[2], partes[1] - 1, partes[0]);
        }
		
        function verifica(idMenor, idMaior, primeiro, botao) {
            $('.message1').remove();
		
            $campoMenor = $('#' + idMenor);
            $campoMaior = $('#' + idMaior);
            $campoAviso = primeiro ? $campoMenor : $campoMaior;
            $botao = $('#botao' + botao);
			
            if (!$campoMaior.val() || !$campoMenor.val())
                return;
			
            if (gerarData($campoMenor.val()) <= gerarData($campoMaior.val())) {
                $botao.removeAttr("disabled");
            } else {
                $campoAviso.after($('<span/>').html("Insira uma data válida").addClass('message1'));
                $botao.attr("disabled", "disabled");
            }
        }
    </script>
</form>

Utilizei aquele mesmo plugin da pergunta sobre horas, mas pra validar a data obrigando a ser uma data válida e faço a verificação do botão no oncomplete dela.

Utilizei o pastebin por causa do problema na hora de puxar o source, então esses são os originais:

<script type="text/javascript" src="https://raw.githubusercontent.com/RobinHerbots/jquery.inputmask/2.x/js/jquery.inputmask.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/RobinHerbots/jquery.inputmask/2.x/js/jquery.inputmask.extensions.js" ></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/RobinHerbots/jquery.inputmask/2.x/js/jquery.inputmask.date.extensions.js"></script>



Explicação do function verifica(idMenor, idMaior, primeiro, botao)

  • idMenor vai ser o campo que você vai comparar sendo a data inferior

  • idMaior vai ser o campo que você vai comparar sendo uma data igual ou posterior

  • primeiro é uma flag pra saber se meu aviso de data inválida vai ser no primeiro ou segundo id.

  • botao é pra eu saber qual botão eu preciso travar ou destravar



O segredo pra funcionar

$(document).ready(function(){
    $('.checar').inputmask("dd/mm/yyyy",
                            {
                                "oncomplete": function () {
                                    eval($(this).data("funcao"));
                                }
                            });
});
  • eval aceita uma string como parâmetro e ele irá executar ela como se fosse código normal, exemplo eval("1 + 3") vai retornar 4.

  • atribuo uma data-funcao nos input pra saber exatamente quais campos preciso validar e qual a ordem

  • sobre o submit eu atribui uma função lá também pra retornar false quando a data for inválida, dessa forma ele não é submetido.

  • oncomplete só é chamado quando ele termina de preencher toda a máscara, se você quiser melhorar esse aviso existe outros eventos que podem ser vistos aqui: https://github.com/RobinHerbots/jquery.inputmask (procure por oncomplete, onincomplete...)


Qualquer problema ou bug, me avise que arrumo.

9
  • 1
    Aparentemente está perfeito! Vou checar com mais calma daqui a pouco, mas testei aqui as regras e parece que tá perfeito! Valeu!
    – gustavox
    Commented 28/06/2015 às 18:12
  • 1
    Eu adicionei uma informação sobre o oncomplete no final da resposta se interessar também. Commented 28/06/2015 às 18:13
  • 1
    @gustavox qualquer dúvida sobre alguma linha, pode falar :) Commented 28/06/2015 às 19:42
  • 1
    sim esse plugin é excelente, uma pena ainda não funcionar direito na última versão, fiz um teste de colocar apenas 0 e ele também trava! :) Commented 28/06/2015 às 19:53
  • 2
    @MaiconCarraro Digo isto no caso de usar o plugin na versão que disse estar com problema: ...uma pena ainda não funcionar direito na última versão, fiz um teste de colocar apenas 0 e ele também trava...
    – falsarella
    Commented 30/06/2015 às 20:19

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 .