Mask problem in jQuery

Asked

Viewed 775 times

3

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

Excerpt from the code used on the website:

<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

  • You have to use a validation as an add-on. This plugin only follows the mask and has no built-in validation, this is done by another plugin

  • 1

    @Virgilionovic you could refer me some plugin that does this?

  • I indicated two one that checks the date and the other that can make a validation of several fields, I only put the date that was your main problem in the question.

2 answers

2

You can do it this way:

$('#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 wish to report the error to the user...

2

Has several plugin for example jQuery.validation and one other plugin to verify the date the momentjs. Creates a method on validator ($.validator.addMethod) that will check the date on brazilian format (day, month and year) conferring even leap years. In the rules of validate just call the name of the function that is date_br ready with this you will get a validation on the client side.

Recommending: Beware of client-side validations only, also do on the server side via programming.

Minimal 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>
<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>

References:

Browser other questions tagged jquery-mask-plugin

You are not signed in. Login or sign up in order to post.