How to perform inline validation in Knockout on an input field

Question

I want to allow the user to only enter postive numbers and numbers less then 100. How can i modify this input markup to get my required validation.

<input data-bind="value : $root.rootData.Page" class="form-control">

Edit: I know i can validate in JS, but for my particular case i want to do it solely in the makrup.

Answer 1

You can use regular expressions with HTML5 using the pattern attribute.

How can I validate number between 1 and 99 using regular expression? - Will give you some information about different ways to check if a number is between 1 and 99

From your example, you could use the following

<input data-bind="value : $root.rootData.Page" class="form-control" pattern="^[1-9][0-9]?$">

Answer 2

instead of using regex to match a number field, why not just use the number type and provide min/max?

<input type="number" min="1" max="99" step="1" data-bind="value : $root.rootData.Page" class="form-control" />

Regex could be used in combination with number type as a fallback, since FF support for the number type is lacking:

<input type="number" min="1" max="99" step="1" pattern="^[1-9][0-9]?$" data-bind="value : $root.rootData.Page" class="form-control" />