Bootstrap number validation

Question

I m having Bootstrap and I have problem with validation  I need input only positive integer   How to implement it   For example        lt div gt                              lt input type  number  id  replyNumber  data-bind  value replyNumber    gt   lt  div gt

User · Answer

You should use jquery validation because if you use type="number" then you can also enter "E" character in input type, which is not correct.

Solution:

HTML

<input class="form-control floatNumber" name="energy1_total_power_generated" type="text" required="" >

JQuery

//integer value validation
$('input.floatNumber').on('input', function() {
    this.value = this.value.replace(/[^0-9.]/g,'').replace(/(\..*)\./g, '$1');
});

User · Answer

It s not Twitter bootstrap specific  it is a normal HTML5 component and you can specify the range with the min and max attributes  in your case only the first attribute   For example    x000D   x000D   lt div gt                         x000D       lt input type  number  id  replyNumber  min  0  data-bind  value replyNumber    gt  x000D   lt  div gt  x000D   x000D   x000D    I m not sure if only integers are allowed by default in the control or not  but else you can specify the step attribute    x000D   x000D   lt div gt                         x000D       lt input type  number  id  replyNumber  min  0  step  1  data-bind  value replyNumber    gt  x000D   lt  div gt  x000D   x000D   x000D    Now only numbers higher  and equal to  zero can be used and there is a step of 1  which means the values are 0  1  2  3  4         BE AWARE  Not all browsers support the HTML5 features  so it s recommended to have some kind of JavaScript fallback  and in your back-end too  if you really want to use the constraints   For a list of browsers that support it  you can look at caniuse com

User · Answer

you can use PATTERN    lt input class  form-control  minlength  1  pattern   0-9      ngModel    value   name  ngModel  gt    lt div  ngIf  name invalid  amp  amp   name dirty    name touched   class  text-danger  gt     lt div  ngIf  name errors  pattern  gt Is not a number lt  div gt   lt  div gt

User · Answer

Well I always use the same easy way and it works for me  In your HTML keep the type as text  like this     lt input type  text  class  textfield  value    id  onlyNumbers  name  onlyNumbers  onkeypress  return isNumber event   onpaste  return false    gt    After this you only need to add a method on javascript   lt script type  text javascript  gt       function isNumber evt            evt    evt    evt   window event          var charCode    evt which    evt which   evt keyCode          if    charCode  gt  31  amp  amp  charCode  lt  48     charCode  gt  57                return false                    return true         lt  script gt    With this easy validation you will only get positive numbers as you wanted  You can modify the charCodes to add more valid keys to your method   Here  s the code working  Only numbers validation

[twitter-bootstrap] Bootstrap number validation

Examples related to twitter-bootstrap