Problem with masquerading in jQuery

Question

Problem with masquerading in jQuery

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

I would like to know if it is possible to make a more complete masks for the date field using this plugin (jQuery -mask) for example the user can put in the field 99 month when in fact the month only goes to 12 and in the day field also the same thing can put 99 when in fact the maximum would be 31 there is some way to mask this follows the form of site

Excerpt from code used on the 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>

jquery-mask-plugin

asked by anonymous 01.12.2016 / 13:43

2 answers

Difficulty with def and regex Receive 2 parameters when entering a key parameter

score 2 · Answer 1

You can do this as follows:

$('#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('');
});

Within each if you can display some alert or any message you want to report the error to the user ...

score 2 · Answer 2

It has several plugin for example jQuery.validation and another plugin to check the date o momentjs . Creates a method in validator ( $.validator.addMethod ) that will check the date in the Brazilian format (day, month and year) including leap years. In the validate rules only call the function name that is date_br ready with this will have a validation on the client side.

Minimum example:

$(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><scriptsrc="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><scriptsrc="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>

References: