Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Dynamically formatting phone number or date fields

deepakt84913413
Level 4
Level 4

How do I format Phone number or date fields using rule editor?

I am able to format it after focusout of the field, but I am looking into how to do that dynamically while the user types in.

1 Accepted Solution
James_R_Green
Correct answer by
Level 7
Level 7

deepakt84913413

You may already know, but the out of the box way to handle formatting is the "Display Pattern" on a field:

Screen Shot 2018-03-01 at 23.25.35.png

This is triggered when you exit the field and will reformat according to the pattern - I would recommend doing this.

If you really need to format as you type, you could do something like this on the "Initialize" trigger of a field, to add a listener as @navinkaushal suggested.

var $el = $("#" + this.id + " input" );

$el.keyup(function (el) {   

     var $element = $(el.target);

     var elementValue = $element.val();

     var upperCaseValue =  $element.val().toUpperCase();

     $element.val(upperCaseValue);

});

Thanks,

James

View solution in original post

3 Replies
navinkaushal
Level 4
Level 4

Add some custom JavaScript code onReady of form or onBlur/onKeypress/Keydown event of those field. You can put your own custom logic.

There are many formatted libraries available, can use them too.

deepakt84913413
Level 4
Level 4

Yeah. I was trying out a bunch of code for that but it has not been possible as of now. I was trying to see if anyone has any example code for that.

James_R_Green
Correct answer by
Level 7
Level 7

deepakt84913413

You may already know, but the out of the box way to handle formatting is the "Display Pattern" on a field:

Screen Shot 2018-03-01 at 23.25.35.png

This is triggered when you exit the field and will reformat according to the pattern - I would recommend doing this.

If you really need to format as you type, you could do something like this on the "Initialize" trigger of a field, to add a listener as @navinkaushal suggested.

var $el = $("#" + this.id + " input" );

$el.keyup(function (el) {   

     var $element = $(el.target);

     var elementValue = $element.val();

     var upperCaseValue =  $element.val().toUpperCase();

     $element.val(upperCaseValue);

});

Thanks,

James

View solution in original post