Vejamos
De jQuery não entendo quase nada - prefiro o meu código em JavaScript puro (sem frameworks). Acabei por aprender um bocado de jQuery tentando solucionar seu problema. E no final, acho que foi solucionado..
Explicação
Segue uma breve explicação do código e do processo. Talvez facilite o entendimento.
No JS
- Adicionei o
$.validate();
pois precisava verificar se a checagem da data funcionava corretamente com o código, obviamente; - Em
$.validate();
, adicionei oreturn(false)
para impedir o envio do formulário no caso de haver outras checagens de outros elementos do formulário; - Dentro do escopo de
$('form > .checarData')
, acresci o.on('validation', ...
para que houvesse uma forma de determinar a ativação do botão;
No HTML
- o elemento de ID
#aniv2
serve como espelho do elemento de ID#aniv1
. Ou seja, o que tiver em#aniv1
terá em#aniv2
.
No caso, quantas mais datas a a serem validadas você tive, cada uma delas terá que ter um elemento espelho. Por quê?
Veja: o jQuery Form Validator precisa que o atributo type
seja igual a text
como você mesmo disse. MAS, depois que o formulário for enviado, você vai precisar que ele seja do tipo date
.
Assim, tendo os dois elementos, sendo um espelho do outro, você consegue validar a data e ainda assim obter o formulário com o campo 'aniversário' do tipo date
para formatar na página destino, seja qual for. E como um deles está oculto, o usuário não irá enxergar esse elemento espelho.
Código & Exemplo
$.validate({
modules: 'date',
onSuccess: function () {
/* Impede o envio do formulário */
return (false);
}
});
/* 'form' é a TAG mesmo */
$('form > .checarData').on('validation', function (evt, valid) {
/* Copia #aniv1 em #aniv2 */
document.getElementById("aniv2").value = document.getElementById("aniv1").value;
/* Verifica se o campo não está vazio E SE a data está OK */
if (valid) {
$('#registrar').removeAttr('disabled');
} else {
$('#registrar').attr('disabled', 'disabled');
}
});
<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 id="formulario">
Usuário
<br />
<input type="text" id="user" name="username" />
<br />Email
<br />
<input type="text" id="email" name="email" />
<br />Aniversário
<br />
<input type="text" id="aniv1" name="aniv1" class="checarData" data-validation="birthdate" data-validation-format="dd/mm/yyyy" />
<!-- Espelho de #aniv1, porém do tipo "date" -->
<input type="date" id="aniv2" name="aniv2" hidden="hidden" />
<br />
<input type="button" id="registrar" value="Registrar" disabled="disabled" />
</form>
Notas
Você deve entender de jQuery o suficiente para saber como inserir o .on('input', ...
no lugar de .on('blur', ...
. Eu realmente não sou o mestre nesse framework e nunca usei ele diretamente profissionalmente - somente quando aparece em bibliotecas de terceiros em sistemas não desenvolvidos por mim.
Ah! Por via das dúvidas, JSFiddle para garantir!
Espero ter ajudado!