How to create simple validations for your screen text inputs

Well there is a challenge to allow input positive integer values into an input text box inside your screen, let′s check ways of validation.

For example if I want a NIF?validation?in an input box, there is a few approaches to solve it.

It could be a?REGEX?validation, but when you are filling a form with those values and after fill it and press Save, the validation kicks in and don′t let you save the data.

Or other option is?input masks, but normally need to add external components that can increase the size of your solution.

My suggestion is that instead of checking what has been entered, why don’t implement a?textbox validation?to restrict the user entering values different from numeric or alphabet.

It seems a little simple to tackle this small validation but let us go deeper into this possible solution described here because the development is easy and the solution is elegant ( tested in Outsystems 10 version Web Traditional project).

Using simple JavaScript we can restrict the user of entering wrong characters or even special characters.

Selecting an input text box and set it to number type we can add a “onKeypress” event to control the user inputs like in image example.

Let us translate this javascript string to better understanding of the meaning of which one of the charCode’s that are used.

According with the image reference table below, we can say that:

· “event.charCode >= 48 && event.charCode <= 57” is for letting the user introduce numbers from 0–9

· “event.charCode == 13” is for pressing enter to start the search

· ” event.charCode == 0” unable to identify a key use the key value 0

· “event.charCode == 8” is for backspace

· “event.charCode == 46” id for deleting characters

Introducing Keyboard Events

Let me introduce you to keyboard events. They are triggered by interacting with a physical or virtual key:

• Pressing down a key triggers the?keydown?event.
• Pressing down a printable key triggers the?keypress?event.
• Releasing a key triggers the?keyup?event.

Whenever a keyboard interaction happens, the event will provide an object with the information about the interaction itself. For example, what key was pressed and the physical location on the keyboard. Here are some of the properties that can be used to identify the pressed key:

• keyCode?returns a numeric value associated with a particular pressed key no matter if this key is in lowercase or uppercase.
• charCode?indicates the ASCII value of the character associated with the pressed key. This property distinguishes between lowercase and uppercase.
• key?returns the value of the pressed key. If you press the lowercase a key this property will return the letter a, instead of a code representation of the key.
• which?returns the numeric keyCode of the key pressed or the charCode for an alphanumeric key.
• keyIdentifier?returns a string representation of the pressed key.
• code?represents a physical key on the keyboard. This property returns a value that isn’t altered by the keyboard layout or the state of the modifier keys.

Finnally, for conclusion of this article let us suggest to try something to play a little more with these keyboard key values.

• A funny example is to write?“HELLOWORD”?with charcodes…
• we also can test them using this link from w3schools:?W3Schools Tryit Editor?.
• Solution: 72, 69, 76, 76, 79, 87, 79, 82, 76, 68,

Thank you.