Skip to main content
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/
Fonte Link

Utilizei aquele mesmo plugin da pergunta sobre horaspergunta 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 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 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.

Fim da Recompensa com 100 pontos de reputação concedidos por gustavox
adicionou 855 caracteres ao conteúdo
Fonte Link
Maicon Carraro
  • 9mil
  • 2
  • 23
  • 51
.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>
.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>
.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>
adicionou 4 caracteres ao conteúdo
Fonte Link
Maicon Carraro
  • 9mil
  • 2
  • 23
  • 51
.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"
                       onkeyup="verificadata-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>
  • 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...)

.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"
                       onkeyup="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>
  • 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.

.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>
  • 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...)

adicionou 114 caracteres ao conteúdo
Fonte Link
Maicon Carraro
  • 9mil
  • 2
  • 23
  • 51
Carregando
Fonte Link
Maicon Carraro
  • 9mil
  • 2
  • 23
  • 51
Carregando