Skip to main content
4 de 4
Alterado explicaçãoparaauxiliar questionador.
José
  • 1,6mil
  • 9
  • 22

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 o return(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!

José
  • 1,6mil
  • 9
  • 22