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.
.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>
.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, exemploeval("1 + 3")
vai retornar 4.atribuo uma
data-funcao
nos input pra saber exatamente quais campos preciso validar e qual a ordemsobre o
submit
eu atribui uma função lá também praretornar 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 poroncomplete
,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, exemploeval("1 + 3")
vai retornar 4.atribuo uma
data-funcao
nos input pra saber exatamente quais campos preciso validar e qual a ordemsobre o
submit
eu atribui uma função lá também praretornar 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, exemploeval("1 + 3")
vai retornar 4.atribuo uma
data-funcao
nos input pra saber exatamente quais campos preciso validar e qual a ordemsobre o
submit
eu atribui uma função lá também praretornar 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 poroncomplete
,onincomplete
...)