Limit the input Field to take only numbers with range

Question

I want to create a input field in html where can limit the users to enter a number only between the range -40 to 130. The user can also enter decimal values For example : -40.

Answer 1

You can use an input of type number with the attributes min max and step like this :

<form action="">
    <input type="number" min="-40" max="130" step="0.1" id="input"/>
    <button type="submit">Ok</button>
</form>

I provide a JSFiddle here. When you try to submit the form, the html5 validation displays a message if the number is out of the bounds or with more than one decimals.

JSFiddle

Answer 2

as Xartok told You can use an input of type number with the attributes min max and step but if the user is keying in the input its a bit hard from my experience. what i did was like this.

• onkeypress is used to allow users to only key in integers with decimal only.

• ng-blur is used to trigger changeDecimal function to do the validation/rounding up to fixed decimal places

  <form>
  
  <input type="text" id="input" onkeypress="return event.charCode >= 45 && event.charCode <= 57 && event.charCode!=47" ng-model="input1"ng-blur="changeDecimal()" />
  
  <button type="submit">Ok</button>
  
  </form>
  

and from the controller side what i did was this :

1st i parse the input to float and fix it to 1 decimal place. then i made a condition to check the range if it is within the range, the input is replaced with the new value else an alert is returned. in the else section i did a small check if the input is blank or not a number then replace with a default value (to avoid a loop of alert if the input is left blank)

app.controller('MainCtrl', function($scope) {

  $scope.changeDecimal = function (){
    temp = parseFloat($scope.input1).toFixed(1);
    if (temp > -40 && temp < 130 && !isNaN(temp)){
      $scope.input1= temp;
    }else{
      alert("value out of range ");
      if (isNaN (temp) || temp == null || !angular.isDefined(temp)){
        $scope.input1=0;
      }
    }
  }

});

If you plan to use the input type as number what you can do is set a condition for you submit button (ng-disable). the button is disabled until the condition is met.

here is the sample from Plunker