No JS
- Adicionei o
$.validate();
pois acabei testando no JSFiddle e precisava verificar se a checagem da data funcionava corretamente;corretamente com o código, obviamente;
- Dentro do escopo deEm
$('form > .checar'validate();
, acresciadicionei o .onreturn('validation', ...false)
para que houvesse uma forma de determinar qual éimpedir o estado da validação da data: se validou ou não;envio do formulário no caso de haver outras checagens de outros elementos do formulário;
- AltereiDentro do escopo de
.on('input', ...
para .on('blur', ...
pois por algo relacionado ao jQuery e JSFiddle - suspeito que seja algo com o $( window ).load
ou $('form document> ).ready(checar')
- não consegui ele funcional. Você deve entender isso melhor que eu e deve saber melhorar o código;
- adicionei a classe
checar
nos elementos para evitar que fiquem em branco. Remova/adicione dos elementos conforme desejar;
- a variável
validou
é o estado da validação da data. E como não fui capaz de criar variáveis globais - novamente, possivelmente por conta de $( window ).load
ou $( document ).ready()
- precisei de um elemento oculto em que armazenei, acresci o valor de valid
obtido em.on('validation', ...
, e transformei-o em um booleano para ser utilizado na lógica verificacional;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 #aniv2#aniv1
só existe para que o formulário, ao ser enviado, tenha o aniversário com o atributoterá em type="date"#aniv2
conforme especificado. E em eventuais acréscimos de elementos em situação semelhante, esse código deve ser repetido e corrigido de forma apropriada;
- Se os elementos desejados não ficarem em branco ou a data estiver correta, simplesmente o botão vai aparecer;
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.
$.validate({
modules: 'date',
onSuccess: function() {
return (false);
}
});
/* 'form' é TAG */
$('form > .checar')
.on('validation', function(evt, valid) {
document.getElementById('validou').value = valid ? "true" : "false";
})
.on('blur', function() {
var campo_vazio = false;
/* BurlandoImpede o problema das variáveis globais dentro de document.ready e etcenvio do JSFiddleformulário */
var validou = document.getElementById('validou').value == "false" ?return (false : true;
);
/*
* Armazena o conteúdo em um input type=data para seu uso posterior}
});
/* Aqui seria legal encaixar uma lógica para fazer para todos que precisam do campo type'form' igualé a date
TAG mesmo */
document.getElementById("aniv2").value = document.getElementById("aniv1").value;
$('form > .checar'checarData').each(functionon() {
'validation', iffunction ($(this).val() ===evt, ''valid) {
campo_vazio = true;
}
});
/* Verifica se o campo não está vazio E SE a data está OK */
if (!campo_vazio &&if validou(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" class="checar" />
<br />Email
<br />
<input type="text" id="email" name="email" class="checar" />
<br />Aniversário
<br />
<input type="text" id="aniv1" name="aniv1" class="checar"class="checarData" data-validation="birthdate" data-validation-format="dd/mm/yyyy" />
<!-- Espelho de #aniv1,porém do tipo "text" -->
<input type="date" id="aniv2" name="aniv2" class="checar" hidden="hidden" />
<!-- Auxilia na validação. Pode ser um DIV também mas precisará alterar o código -->
<input type="text" id="validou" name="validou" hidden="hidden" value="false" />
<br />
<input type="button" id="registrar" value="Registrar" disabled="disabled" />
</form>