Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap number validation

I'm having Bootstrap and I have problem with validation. I need input only positive integer. How to implement it?

For example:

<div>                            <input type="number" id="replyNumber" data-bind="value:replyNumber" /> </div> 
like image 783
user2264703 Avatar asked May 13 '13 08:05

user2264703


People also ask

How do I validate a number?

Mobile Number validation criteria:The first digit should contain numbers between 6 to 9. The rest 9 digit can contain any number between 0 to 9. The mobile number can have 11 digits also by including 0 at the starting. The mobile number can be of 12 digits also by including 91 at the starting.

What is bootstrap validation?

Bootstrapping Validation is a way to predict the fit of a model to a hypothetical testing set when an explicit testing set is not available.

Is it possible to implement form validation using bootstrap?

Here's how form validation works with Bootstrap: HTML form validation is applied via CSS's two pseudo-classes, :invalid and :valid . It applies to <input> , <select> , and <textarea> elements. Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form> .

Is number validation in JavaScript?

We have used isNaN() function for validation of the textfield for numeric value only. Text-field data is passed in the function and if passed data is number then isNan() returns true and if data is not number or combination of both number and alphabets then it returns false.


1 Answers

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:

<div>                             <input type="number" id="replyNumber" min="0" data-bind="value:replyNumber" />  </div>

I'm not sure if only integers are allowed by default in the control or not, but else you can specify the step attribute:

<div>                             <input type="number" id="replyNumber" min="0" step="1" data-bind="value:replyNumber" />  </div>

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.

like image 104
g00glen00b Avatar answered Oct 13 '22 16:10

g00glen00b