Form Input Mask for prettier data

I've this big form that is just native web stuff with jQuery. Its got a lot of fields, like 200, and periodically we add and remove fields. I have a request to make all the numbers show up with commas as a thousands separator, and also for dates to always show up in localized format.

As it is right now, now will just show up in the raw format: 10000000. The goal is to show 10,000,000 in the input.

I would love to not touch the server-side code for database updating, so keep all the logic on the client in JavaScript. Too have the user enter information normally, but once they are finished, it could show any numbers with the commas. toLocalizedString usually works for this. Then the issue arrises: when the form is submitted, I would need to remove all the commas from the numbers.

toLocalizedString

I started catching the input events, checking if there is a number in there, and adding the commas. Then on submit I'd need a routine to remove the commas, but only if they were put in by my program.

I feel like I've seen functionality like this before, but I haven't found a perfect solution. There needs to be some bifurcation between the source format of the data and the format displayed to the users. I'd love to be able to just show the user a representation of their data without actually changing the data in the cell. Not sure if its possible.

I was thinking there might be some elegant solution to this issue.

1 Answer
1

The generic way to do this is to have a model with the actual (typed) values, for example number, and a view model with formatted display strings.

Eg. (pseudocode):

class Model
value: number


class ViewModel
value: string


class ViewModelMapper
toModelView(model: Model): ModelView

toModel(modelView: ModelView): Model




You will need to do transformations from model to view model when loading the data from the server and back before saving to server. You will use the view model to display the data in UI and the model to communicate with the backend.

You can use existing input mask libraries that are doing something along these lines already. See for example something like jQuery-Mask-Plugin.

The question is a little generic, maybe you would like to add some specific details.

$('input').unmask()

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.