Limit value R $ in input field with HTML5 and CSS3 with Javascript

Question

Limit value R $ in input field with HTML5 and CSS3 with Javascript

Navigation

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

2

I need to limit the R $ value of the input field of a form. The form looks like this:

<div class="container">
            <form>
                <div class="form-group">
                    <label for="dinheiro"><b>Desejo doar em R$: </label>
                    <input name="campo1" onkeypress="mascara(this,mreais)" size="7" min="10,00" max="1.064,00" /><br>                    
                    <small>Conforme resolução do TSE, as doações são limitadas a R$ 1.064,10 por dia e a 10% dos rendimentos brutos em 2017 para cada pré-candidato. </small><br>
                    <button type="submit" class="btn-doar-form">Doar com Pagseguro</button>           
                   <!-- <button type="submit" class="btn-doar-form">Doar com PayPal</button> -->

                </div>

            </form>
        </div>

And I made a script to assign R $ in the field like this:

<script type="text/javascript">
            function mascara(o, f) {
                v_obj = o
                v_fun = f
                setTimeout("execmascara()", 1)
            }

            function execmascara() {
                v_obj.value = v_fun(v_obj.value)
            }

            function mreais(v) {
                v = v.replace(/\D/g, "") //Remove tudo o que não é dígito
                v = v.replace(/(\d{2})$/, ",$1") //Coloca a virgula
                v = v.replace(/(\d+)(\d{3},\d{2})$/g, "$1.$2") //Coloca o primeiro ponto
                return v
            }
        </script>

How can I limit the maximum amount to $ 1,064.00?

javascript html5 css3

asked by anonymous 15.06.2018 / 19:25

2 answers

2

Doing a simple test here, with the input below:

<input type = "number" min= '10' max = '1064'>

Automatically typing 1065 had the following return:

Please enter a value less than or equal to 1064

Note that min and max must be integers (they do not refer to the number of characters but to the size of the allowed number). If you need the number to be broken, use the step = 0.01

15.06.2018 / 19:39

Preventing anchored links from leaving stored histories Doubts with anchor link

score 1 · Accepted Answer

You can also restrict values using this code at the end of the mreais(v) function:

function mreais(v) {
    v = v.replace(/\D/g, "") //Remove tudo o que não é dígito
    v = v.replace(/(\d{2})$/, ",$1") //Coloca a virgula
    v = v.replace(/(\d+)(\d{3},\d{2})$/g, "$1.$2") //Coloca o primeiro ponto

   if(v.length >= 5){
      var maximo = v.replace(/\./g,'').replace(',','.') > 1064;
      var minimo = v.replace(/\./g,'').replace(',','.') < 10;

      if(maximo){
         return '1.064,00';
      }else if(minimo){
         return '10,00';
      }else{
         return v;
      }
   }else{
      return v;
   }
}

You can remove the min and max attributes from input because they only work in type="number" . By the way, your mask will not work in% with% input .

Example:

function mascara(o, f) {
    v_obj = o
    v_fun = f
    setTimeout("execmascara()", 1)
}

function execmascara() {
    v_obj.value = v_fun(v_obj.value)
}

function mreais(v) {
    v = v.replace(/\D/g, "") //Remove tudo o que não é dígito
    v = v.replace(/(\d{2})$/, ",$1") //Coloca a virgula
    v = v.replace(/(\d+)(\d{3},\d{2})$/g, "$1.$2") //Coloca o primeiro ponto
   
   if(v.length >= 5){
      var maximo = v.replace(/\./g,'').replace(',','.') > 1064;
      var minimo = v.replace(/\./g,'').replace(',','.') < 10;

      if(maximo){
         return '1.064,00';
      }else if(minimo){
         return '10,00';
      }else{
         return v;
      }
   }else{
      return v;
   }
}

<div class="container">
   <form>
       <div class="form-group">
           <label for="dinheiro"><b>Desejo doar em R$: </label>
           <input name="campo1" onkeypress="mascara(this,mreais)" size="7" /><br>                    
           <small>Conforme resolução do TSE, as doações são limitadas a R$ 1.064,10 por dia e a 10% dos rendimentos brutos em 2017 para cada pré-candidato. </small><br>
           <button type="submit" class="btn-doar-form">Doar com Pagseguro</button>           
          <!-- <button type="submit" class="btn-doar-form">Doar com PayPal</button> -->

       </div>

   </form>
</div>