CODEWITHSUNDEEP
javascripthtmlformsvalidationinput
devmanspi
devmanspi

Reputation: 3

How to limit html number input (allow min to max and 0)

I try to limit a html number field:

<input type="number" min="${userCount}" max="1500" th:value="${userLimit}" class="form-input" name="userLimit">

With this input I want to set my userLimt. So the user shouldn't be able to set up a userLimit below the userCount. This works fine. My problem now is that I have to allow the input '0' as well because '0' in this case means that the userLimit is deactivated. So I want my valid inputs to be 0 and all values from min to max. Is there a way to do this? I already tried to use regex but it seems this doesnt't work for input type number.

Upvotes: 0

Views: 2444

Answers (2)

3AGLExyz
3AGLExyz

Reputation: 36

I hope this is what you are looking for.

Edit: Because there is no jQuery tag inside the question, I provided a plain JavaScript Solution aswell.

Solution JQuery

  
$("#number-input-check").on("change", function() {
    
       // You don't have to store variables in this way, 
       // but I like it this way.
       let options = {
          input: $(this).val(),
          min: $(this).data('min'),
          max: $(this).data('max'),
          zero: $(this).data('zero')
       };
    
       //If entered is 0 and option is enabled (true)
       if(options.input == 0 && options.zero)
          return; 
        
       //Check if input is greater than max and correct input
       if(options.input > options.max){
          $(this).val(options.max);
          return;
       }
    
       //Check if input is smaller than min and correct input
       if(options.input < options.min){
          $(this).val(options.min);
          return;
       }
              
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="number" id="number-input-check" class="form-input" name="userLimit" data-min="50" data-max="150" data-zero="true">

Solution Plain/Javascript 

function MinMaxInput(element, min, max, zeroAllowed){

   if(element.value == 0 && zeroAllowed)
      return;

   if(element.value > max){
      element.value = max;
      return;
   }

   if(element.value < min){
      element.value = min;
      return;
   }

}
<input onchange="MinMaxInput(this, 50, 150, true)" type="number" id="number-input-check" class="form-input" name="userLimit">

Upvotes: 1

Basir khan
Basir khan

Reputation: 168

You can try JavaScript, It is only a idea not a complete solution

    jQuery("#numberinput").on("change paste keyup", function() {
       var v= jQuery(this).val();
       var max=jQuery(this).attr('attr-max');
       var min=jQuery(this).attr('attr-min');
        jQuery('#error').text("")
       if(v < max)   jQuery('#error').text("enter small number")
       else if(v > min)   jQuery('#error').text("enter bing number")
          
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="numberinput" class="form-input" name="userLimit" attr-min="5" attr-max="20">
<span id="error" style="color : red"></span>

Upvotes: 1

Related Questions