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.2 (valid) -40.23 (not Valid) 130(valid) 130.1 (not Valid)

So the input should be able to take in any number between the range and should only accept decimal place fixed to 1.

Any suggestions or help is highly appreciated

thanks in Advance

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.2 (valid) -40.23 (not Valid) 130(valid) 130.1 (not Valid)

So the input should be able to take in any number between the range and should only accept decimal place fixed to 1.

Any suggestions or help is highly appreciated

thanks in Advance

• javascript
• jquery
• angularjs
• html
• validation

• basic conditions, as in if (val <= -41 || val >= 131) ... – adeneo Commented Jul 30, 2015 at 21:18
• yes . But I want to limit the user to enter only one decimal place – Chait Commented Jul 30, 2015 at 21:19
• then use a regex as well, something like /^\d+\.\d$/, but this is starting to sound plicated, and you'll probably need to allow for backspace, delete etc. – adeneo Commented Jul 30, 2015 at 21:25
• 130.1 has one decimal digit and yet it is not considered valid? Can you explain your requirements in greater detail? – Terry Commented Jul 30, 2015 at 21:38
• @Terry I think it's because 130.1 is greater than 130 – Xartok Commented Jul 30, 2015 at 21:51

2 Answers 2

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

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