jquery validation rules and autoNumeric plugin

Question

I have a validation rule as shown below:

loanAmount:{required:true,number:true,range:[20000,500000]},

I also want to do currency formatting for the loanAmount field. So I have used the autoNumeric plugin as shown below:

$('#loanAmount').autoNumeric({dGroup:2});

However, with this the range validation for the loanAmount does not work properly. Instead of getting the raw value for loanAmount, jquery gets the formatted value and hence is not able to validate. For instance, when I enter 25000, it becomes 25,000 and is passed to jquery and the validation does not work as expected.

Is there a way around this?

Will be glad if someone can help.

Thanks, Saurabh

score 1 · Answer 1 · answered Aug 17 '21 at 23:05

I had the same issue as I used autoNumeric and jQueryValidation together. Input value can be edited with normalizer in jQueryValidation.

You can make this arrangement according to the class names by using the addClassRules function. In the examples below I just removed the commas.

$.validator.addClassRules( 'input_class_name', { normalizer: value => value.replaceAll( ',', '' ) } );

score 0 · Answer 2 · answered Nov 13 '15 at 03:54

@Saurabh: I found a solution for that. There is another plugin which is working perfectly fine with the issue you are facing. You can simply download it on the link below:

https://www.customd.com/articles/14/jquery-number-format-redux
The documentation is there as well...

Hope It helps.

score 0 · Answer 3 · answered Jul 11 '19 at 15:13

I got same problem today, here is how I did, first I defined the new custom rule (for money) :

$.validator.addMethod('moneyMinMax', function(value, element, params) {
    return this.optional(element) || (priceToNumber(value) >= params[0] && priceToNumber(value) <= params[1])
}, 'Please submit a value between {0} € & {1} €');

Then :

$myForm.validate({
    rules: {
        field_integer_classic: {
            required: true,
            max: 22,
            min: 2
        },
        field_money: {
            required: true,
            // call custom method added before with array [min, max]
            moneyMinMax: [200, 6000],
        },

I have a simple function priceToNumber to clean up format around a money value. You can use getNumericString() from AutoNumeric if needed.

Something like :

 var value = AutoNumeric.getAutoNumericElement(element).getNumericString();

inside the validator method.

score 0 · Answer 4 · answered Dec 12 '19 at 00:06

Old question, but if anybody finds this issue, there is a workaround by adding a custom validation. You can:

Get the autonumeric object
Get the raw value of the anElement (autonumeric element)

Here is an example of how to add a validation of a minimun value for a money formatted Input with AutoNumeric

# custom_validation.coffee

$.validator.addMethod 'moneyMin', (value, element, minValue) ->
  anElement = AutoNumeric.getAutoNumericElement(element)
  amount = Number(anElement.rawValue)
  this.optional(element) || minValue < amount

score 0 · Answer 5 · edited May 23 '17 at 11:59

Unfortunately, this a regular problem that has no out of the box solution (well not in my knowledge).

What you can do is define your own validation method that will first 'unformat' the value before performing the check. You can find an example here.
When submitting the form, is the value passed formatted ? In this case you can defined your validation rule to check your specific formatting instead of a pure range, via a regex for example.

I think this is a feature that would be worth proposing to the plugin developer: an optional handler that will be called prior to validating the values in which one would be able to for instance unformat the value.

Hope this helps, d.

jquery validation rules and autoNumeric plugin

5 Answers5