Mask with Jquery

Asked

Viewed 86 times

1

I applied a monetary format mask and made a specification not to accept the first digit as 0. However, the following characters are still accepted "and, -, +,." Obs: the field is decimal. The mask works, but accepts the characters described "and, -, +,."

Code in the Django

valor_compra = forms.DecimalField(label=u'Valor de Compra (R$)', required=False, max_digits=11, decimal_places=2, min_value=1)
valor_residual = forms.DecimalField(label=u'Valor Residual (R$)',
                                    required=False, max_digits=11,
                                    decimal_places=2, min_value=1)

Code in the Js

    //Empresa
            $('#id_cnpj').mask('00.000.000/0000-00');
            $('#id_telefone1').mask('(00) 000000000');
            $('#id_telefone2').mask('(00) 000000000');
            $('#id_fax').mask('(00) 000000000');
            $('#id_cep').mask('00.000-000');

            //Adiciona mascara e não aceita numero 0
           var options = {
                onKeyPress: function (valor, e, field, options) {
                    let item = parseInt($('#valor_compra').val().replace(/[,.]/g, ''));
                    if (item === 0) {
                        $('#valor_compra').val('').change();
                    }
                    var masks = ['000000000.00', 'ZZ'];
                    var mask = (valor.length >= 1) ? masks[0] : masks[1];
                    $('#valor_compra').mask(mask, options);
                },
                translation: {
                    'Z': {
                        pattern: /[1-9]/, optional: false
                    },
                },
                reverse: true
            };

            $('#valor_compra').mask('ZZ', options);

            var options = {
                onKeyPress: function (valor, e, field, options) {
                    let item = parseInt($('#valor_residual').val().replace(/[,.]/g, ''));
                    if (item === 0) {
                        $('#valor_residual').val('').change();
                    }
                    var masks = ['000000000.00', 'ZZ'];
                    var mask = (valor.length >= 1) ? masks[0] : masks[1];
                    $('#valor_residual').mask(mask, options);
                },
                translation: {
                    'Z': {
                        pattern: /[1-9]/, optional: false
                    }
                },
                reverse: true
            };

            $('#valor_residual').mask('ZZ', options);

            // Data
            $('#id_data_aquisicao').mask('00/00/0000');
            $('#id_data_aquisicao').datepicker({
                endDate: '0d',
                format: 'dd/mm/yyyy',
                language: 'br'
            });

            $('#id_data_fabricacao').mask('00/00/0000');
            $('#id_data_fabricacao').datepicker({
                endDate: '0d',
                format: 'dd/mm/yyyy',
                language: 'br'
            });

            $('#id_garantia').mask('00/00/0000');
            $('#id_garantia').datepicker({
                format: 'dd/mm/yyyy',
                language: 'br'
            });

            /*  Esse método é executado quando o modal se fecha.
                É necessário para quando o modal se fecha ele apague os seus dados.
                Caso ele não esteja presente o primeiro modal aberto persistirá mesmo
                que outros modais de outros tipos sejam abertos. */
            $("#myModal").on('hidden.bs.modal', function () {
                $(this).data('bs.modal', null);
            });

            var max_height = Math.max($('#dados-basicos').height(), $('#dados-adicionais').height());
            $('#dados-basicos').height(max_height);
            $('#dados-adicionais').height(max_height);
        });

    </script>
  • The problem is in Django or JS? I tested here without Django and it worked normal.

  • The mask works, but the following characters are accepted : "and, -, +,." .

  • It is. As I said, here it worked normal, without accepting those characters that you spoke.

  • Can test in that Fiddle

  • ANSWER: My input was type="number". To work the type must be text.

No answers

Browser other questions tagged

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