Skip to main content
Alterado explicaçãoparaauxiliar questionador.
Fonte Link
José
  • 1,6mil
  • 9
  • 22
$.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 "text""date" -->
  <input type="date" id="aniv2" name="aniv2" hidden="hidden" />

  <br />

  <input type="button" id="registrar" value="Registrar" disabled="disabled" />

</form>
$.validate({
    modules: 'date',
    onSuccess: function () {

        /* Impede o envio do formulário */
        return (false);

    }
});

/* 'form' é a TAG mesmo */
$('form > .checarData').on('validation', function (evt, valid) {

    /* 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 "text" -->
  <input type="date" id="aniv2" name="aniv2" hidden="hidden" />

  <br />

  <input type="button" id="registrar" value="Registrar" disabled="disabled" />

</form>
$.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>
Pequeno erro de referência à variável
Fonte Link
José
  • 1,6mil
  • 9
  • 22
  • 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 > .checar'checarData'), acresci o .on('validation', ... para que houvesse uma forma de determinar a ativação do botão;
  • 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 > .checar'), acresci o .on('validation', ... para que houvesse uma forma de determinar a ativação do botão;
  • 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;
Melhoria de código, mudança para atender melhor ao questionador e melhor formataçãoe explicação.
Fonte Link
José
  • 1,6mil
  • 9
  • 22

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>
  • Adicionei o $.validate(); pois acabei testando no JSFiddle e precisava verificar se funcionava corretamente;
  • Dentro do escopo de $('form > .checar'), acresci o .on('validation', ... para que houvesse uma forma de determinar qual é o estado da validação da data: se validou ou não;
  • Alterei de .on('input', ... para .on('blur', ... pois por algo relacionado ao jQuery e JSFiddle - suspeito que seja algo com o $( window ).load ou $( document ).ready() - 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 o valor de valid obtido em.on('validation', ..., e transformei-o em um booleano para ser utilizado na lógica verificacional;
  • o elemento de ID #aniv2 serve como espelho do elemento de ID #aniv1. #aniv2 só existe para que o formulário, ao ser enviado, tenha o aniversário com o atributo type="date" 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;
$.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;


  /* Burlando o problema das variáveis globais dentro de document.ready e etc do JSFiddle */
  var validou = document.getElementById('validou').value == "false" ? 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 igual a date
   */
  document.getElementById("aniv2").value = document.getElementById("aniv1").value;


  $('form > .checar').each(function() {

    if ($(this).val() === '') {
      campo_vazio = true;
    }

  });

  /* Verifica se o campo não está vazio E SE a data está OK */
  if (!campo_vazio && validou) {
    $('#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" 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>

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 > .checar'), 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.

$.validate({
    modules: 'date',
    onSuccess: function () {

        /* Impede o envio do formulário */
        return (false);

    }
});

/* 'form' é a TAG mesmo */
$('form > .checarData').on('validation', function (evt, valid) {

    /* 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 "text" -->
  <input type="date" id="aniv2" name="aniv2" hidden="hidden" />

  <br />

  <input type="button" id="registrar" value="Registrar" disabled="disabled" />

</form>
Fonte Link
José
  • 1,6mil
  • 9
  • 22
Carregando