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.

input mask examples

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.

client search

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.

search for nif

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.

input text box properties

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

reference table

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.

example of web browsers

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.