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

Question

I need to limit the value in R$ input field of a form. The form is 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 R $ 1.064,00?

Answer 1

Doing a simple test here, with the input below:

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

Automatically, when typing 1065 I had the return below:

Please enter a value Less than or Equal to 1064

Note that min and max have to be integers (not the number of characters but the size of the number allowed). If you need to break the number, use the option step = 0.01

Answer 2

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

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 attributes min and max of input because they only work in type="number". By the way, your mask won’t work on input type="number".

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>