2
Views
10
Comments
Formatting user inputs
Question
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 (https://www.outsystems.com/NetworkForums/ViewTopic.aspx?Topic=JavaScript-Validation)
FormatPhoneNumber.oml
2011-06-15 10-52-08
Drew Casey
Hi,

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.  
2011-06-15 10-49-56
AcacioPN
Staff
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.
2011-06-15 10-52-08
Drew Casey
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
UserImage.jpg
João Carvalho

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.
2025-11-03 12-56-18
Evert van der Zalm
 
MVP

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
2016-04-21 20-09-55
J.
 
MVP
@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.

2025-11-03 12-56-18
Evert van der Zalm
 
MVP

Joos,

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,
evert


UserImage.jpg
João Carvalho
Hi,

im almost sure that you can do that with javascript (preventing from entering an invalid char).
2025-11-03 12-56-18
Evert van der Zalm
 
MVP


Hello,

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

So hoped there was another way to do it.

Kind Regards,
Everl

2016-04-21 20-09-55
J.
 
MVP
quick example (not tested, just googled it :P )

<form>
<input type="text" name="yourInput" onkeypress="return
testForApostrophe(event);">
</form>
<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);
}
</script>


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.