3

Gostaria de saber se é possível fazer umas mascara mais completa para o campo data usando esse plugin(jQuery-mask) por exemplo o usuário consegue colocar no campo mês 99 quando na verdade o mês só vai até o 12 e no campo dia também a mesma coisa consegue colocar 99 quando na verdade o máximo seria 31 existe alguma forma de mascarar isso segue o formulário do site

Trecho do código usado no site:

<script type="text/javascript">
  $(document).ready(function(){
  //dados pessoais
  $('#input-custom-field3').mask('00/00/0000');
  $('#input-custom-field1').mask('000.000.000-00', {reverse: false});
  $('#cnpj').mask('00.000.000/0000-00', {reverse: false});
  $('#input-custom-field2').mask('00.000.000-0', {reverse: false});
  $('#phone_with_ddd').mask('(00) 0000-0000');
  $('#cel_with_ddd').mask('(00) 00000-0000');

  //endereço
  $('#input-postcode').mask('00000-000');
  $('#input-custom-field5').mask('0000000');
});
</script>
3
  • Tem que utilizar uma validação como complemento. Esse plugin só segue a mascara e não possui validação embutida, isso é feito por outro plugin
    – novic
    Commented 1/12/2016 às 12:51
  • 1
    @VirgilioNovic você poderia me indicar algum plugin que faça isso? Commented 1/12/2016 às 12:57
  • indiquei dois um que confere a data e o outro que pode fazer um validação de vários campos, só coloquei o de data que era o seu principal problema na pergunta.
    – novic
    Commented 1/12/2016 às 14:27

2 Respostas 2

2

Você pode fazer da seguinte forma:

$('#input-custom-field3').focusOut(function(){ //você pode alterar aqui o seletor para alguma classe, para validar todos os campos de data
    var valid = true;
    var date = $(this).val().split('/');
    var day = date[0];
    var month = date[1];
    var year = date[2];

    if(day < 1 || day > 31)
        valid = false;
    if(month < 1 || month > 12)
        valid = false;
    if(year <= 1990 || year >= 2099) //aqui você pode ajustar o range a seu critério
        valid = false;

    if(!valid)
        $(this).val('');
});

Dentro de cada if você pode exibir algum alert ou alguma mensagem que desejar para informar o erro ao usuário...

2

Tem vários plugin por exemplo jQuery.validation e um outro plugin para verificar a data o momentjs. Cria um método no validator ($.validator.addMethod) que vai verificar a data no formato brasileiro (dia, mês e ano) conferindo inclusive anos bissextos. Nas regras de validate só chamar o nome da função que é date_br pronto com isso terá uma validação no lado do cliente.

Recomendação: Cuidado com validações somente do lado do cliente, faça também no lado do servidor via programação.

Exemplo minimo:

$(document).ready(function() {
  $.validator.addMethod("date_br", function(value, element)   {    
    return moment(value, 'DD/MM/YYYY', true).isValid();
  }, "Data inválida.");

  $("#form1").validate({
    rules: {
      data: {
        required: true,
        date_br: true
      }
    }
  });
  
  $('#data').mask('99/99/9999');
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.3/jquery.mask.min.js"></script>
<form id="form1" method="post">
  <input type="text" name="data" id="data">
  <button>Gravar</button>
</form>

Referencias:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .