Formatting user inputs

Formatting user inputs

Some input fields can be too complex when shown in their raw format. Two examples of such fields are phone numbers and credit card numbers. You can improve the usability of the application by formatting these fields in a more human readable format.

One way to do this is to format the field after the user leaves the input. Let’s assume you have an application that asks for a 10 digit phone number. The user inputs “1234567890” and, as soon as he leaves the input field, the field is translated to “(123) 456-7890”. This gives immediate feedback that the value the user entered is valid and improves the readability of the form.

The attached sample shows how this can be done. There is an extended property in the input field called “onfocusout” that is set to “this.value= formatPhone(this.value);”. This ensures that each time the user leaves the input the function “formatPhone” is called with the value of the input as parameter. The function then returns the value of the phone with the desired format. The “formatPhone” function is defined in the Web Screen JavaScript and supports both 9 and 10 digit phone numbers.

You can also add custom validations to these special inputs. Please refer to the “JavaScript Validation“ post to learn how to do this (

I'm running version 5.0 and want to know is this still a valid way to handle this or is there another way ? I was unable to look at your example as its from version 3.0 and will not load.  
Hi Drew

With 5.0 and built-in AJAX, it is simpler to do now. Just:
  -> Map the input field to a text variable;
  -> Use the OnChange property of the input widget to reformat the value and refresh the widget.

I don't have a Service Studio available here, but the process should be straightforward. If you have any problems doing it, tell me so and I will later post an example.
Hi Acacio,

Seems simply enough however I can't seem to get it to re-display the new re-formated value. Please send an example when you get time. - Thanks

Hi Drew, you can't change the displayed value of an input box (using AJAX) while it is on focus. This might be your problem.

Is there a way to pass this by?

The problem is I have one inputBox and need to change the input (if it's wrong).

I use the OnChange event and in the action I set the new value, do a axaj refresh but the old value (wrong one) is still being showed.

I use the input textBox for a integer value, but people can type 'a' or '-1' and I change those values, but the changed value isn't shown.

Hope there is a solution for this?

Kind Regards,
@Evert, try a different approach. just refuse the keys being placed there.

so check with onkeypress/keydown event  if it's a number or a character. if it's a number, ok, if  it's a non-number, ignore the keypress.


I could do that but the result will be the same. If a uer put's in  a char and there will be done nothing, the char still keep standing in the field, thats the thing I don't want to do.

If the user input a wrong format, I want to show the default format again.

Kind Regards,


im almost sure that you can do that with javascript (preventing from entering an invalid char).


I just don't want to use to much javascript (overview and maintenance)

So hoped there was another way to do it.

Kind Regards,

quick example (not tested, just googled it :P )

<input type="text" name="yourInput" onkeypress="return
<script type="text/javascript">
function testForApostrophe(e) { // KEYPRESS event
var k;

if (e && e.which) { // NS
k = e.which;
} else if (window.event && window.event.keyCode) { // IE
k = window.event.keyCode;

return (!k || k != 39);