Numeric input in textbox is always required?

Webix JS
1

I would like to have an input textfield that only accepts numeric input. I did not find a text of type “number” in Webix. But I did find a rule that states the field should be numeric: webix.rules.isNumber
The only problem is: when using this rule, the field is always required.

Is it possible to create a numeric input field that is not required?

2

Yep, you can use a custom validation function. Check the next snippet

http://webix.com/snippet/0f24c5dd

Also, you can try to use the native HTML5 number input

http://webix.com/snippet/9207b3cd

3

Great! I didn’t find any documentation on setting the attribute “type” to “number”. I tried setting “view” to “number” instead of “text” (similar to the types “email” etc), but that did not work. It’s kind of confusing.

4

attributes allows to set a custom attribute on the HTML input tag. In above snippet it changes the raw HTML <input type='text'> to the <input type='number'>

5

Out of curiosity, where is this documented? I only found this:

“Input types conside with a type property of the view text while other input attributes are listed within the attributes object property”.

There’s nothing that indicates that I could actually change the input type of the text field by using attributes. Even more, if you want to change the type to “password”, “email” or “url”, you have to do so by changing the type of the component, not the type-attribute, according tot he documentation. Why is there a different way of working for the input type “number” and input type “email”?

found here: http://docs.webix.com/desktop__data_validation.html#html5

6

There is no number and email inputs in Webix UI

So, you can’t use them. And there is no documentation for it, as they don’t exist.

The above solution allows to modify the raw HTML data, generated by widgets. This functionality is not cross-browser ( will not work in old IE ) so it is not a standard and not a recommended solution, just a workaround for your use-case.

7

Thank you for the clarification!

8

It would be nice to see a custom number field. HTML attribute works well, but it breaks the design of the components.

9

Can you provide a bit more info, how the above logic breaks the design?

http://webix.com/snippet/1f439fba

10

I tried to make complex form for business app and was confused by lack so important kind of input text - number field that not allows letters. I want it would filter letters and other symbols while I typing but not while verifying all form’s data

11

I implemented my own numberEdit http://webix.com/snippet/3c8899ed pay attention to “format” attribute. you may want not to use it.

12

Thanks for the snippet intregal. I modified it because I’ve found some issues:

  • It didn’t restrict negative numbers
  • If used inside a form, the value read from that form wasn’t being updated (I didn’t test your custom input as a standalone component)
  • isFloat init code wasn’t working as expected
  • I couldn’t refresh a web page if the input was focused.

I uploaded a modified version which addresses these issues here:
https://webix.com/snippet/bd18675a

13

Can you provide a bit more info, how the above logic breaks the design?

Code Snippet

That snippet uses a text view with type: number. That type is not documented at

Can you please clarify/document?

There is no number and email inputs in Webix UI

Looks like email at least, is supported, according to the link above.

14

Thanks for pointing this out, we have documented type:“number”. Sorry for the inconvenience.

15

Hi! I have a form with a field type number. as when entering an integer number 123 into this field, get a decimal type of 123.00

16

Hi, https://snippet.webix.com/19p41las

17

Thanks

18

Thanks for pointing this out, we have documented type:“number”. Sorry for the inconvenience.

Here’s another place to document that.

19

Thanks very much, we will.