[RESOLVED]Client side number formatting in a text box

I have some text elements that I would like to restrict the type and format of the entries, but I’m not sure how to do this on the client side in mvc

First off, the text elements have to be restricted to numbers only.

Second, some of them I want restricted to integer values – no decimals.

third, I want some of them to allow decimals, but only to two places (currency, basically.)

 

Any ideas on how to best approach this in an mvc app?

I’ve previously used the jQuery autoNumeric plug-in to handle situations like this. It can allow you to very easily define specific formatting and rules to certain textboxes with regards to numeric data. I’ll
demonstrate a few example of each of your scenarios below.

dolot

First off, the text elements have to be restricted to numbers only.

The autonumeric library will handle this by default and you can specify all sorts of formatting information as well (currency signs, thousands place separators, number of places after decimal allowed, rounding and more).

<!-- jQuery and Plugin References -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://www.decorplanit.com/plugin/autoNumeric-1.9.18.js"></script>
<script type='text/javascript'>
    $(function($) {
      // Allows numeric values with no leading zeros (lZero: deny), no thousands place seperators (aSep:'') and up to 10 decimal places (mDec:10)
      $('.numericOnly').autoNumeric('init', {  lZero: 'deny', aSep: '', mDec: 10 });    
    });  
</script>

<!-- Define your specific properties for your field -->
<input type="text" class="numericOnly" />

You can find an example here.

dolot

Second, some of them I want restricted to integer values – no decimals.

You can simply handle this by setting the mDec attribute (number of places after the decimal) to 0 :

<script type='text/javascript'>
    $(function($) {
      $('.numericOnly').autoNumeric('init', {  lZero: 'deny', aSep: '', mDec: 0 });    
    });  
</script>

You can see an example of this integers only solution here.

dolot

third, I want some of them to allow decimals, but only to two places (currency, basically.)

You’ll just need to set the mDec attribute to 2 to handle two places after the decimal :

<script type='text/javascript'>
    $(function($) {
      $('.numericOnly').autoNumeric('init', {  lZero: 'deny', aSep: '', mDec: 2 });    
    });  
</script>

You can see another example here. I would highly recommend checking out the available documentation on the plug-in’s site to see all of the other functionality that it can offer.

My sincerest apologies, Rion – I should have added that jQuery is not allowed on this project.  But then again, I guess I sort of hoped there would be a non-scripting answer to this question.  But in truth, we’re restricted to the dojo javascript library.

Well shucks as that library is extremely helpful and easy to use (you might consider searching around to see if there is a similar Dojo one). However, it’s unlikely that you are going to be able to accomplish this without the use of scripts as TextBoxes
and other elements are generally going to be "dumb" with regards to what they allow.

You could use the
HTML5 number type
, which is supported in some browsers, but it isn’t going to provide you with exactly what you are looking for. If you are using the Dojo library, you might try looking into something like
NumberTextBox.

Thanks, Rion – I’ll take that for a spin and see what kind of results I get.

edit:  Looks like that’s gonna work – thanks for pointing that out.

Leave a Reply