Validating Decimal numbers using validation plugin

Question

I have an input element in my form in which the user inputs price for a specific product. To do so he can either put an amount with decimal numbers or he can simply put a price without the decimal numbers.

<input type="text" id="product_price" name="product_price" maxlength="10" step="0.01" placeholder="Enter price">

$('#addForm').validate({
    rules:{
        product_name: {
            required: true,
        },
        product_price: {
            required: true,
            number: true
        }
    }
})

This is what I did however I don't get what I wanted to achieve. I am trying to make it so that a user can put a number of length 10 up to two decimals. For example, if he enters 1111111111 or 1111111111.11 These both should be valid. What should I do and what be the code?

Thanks!

PDKnight · Accepted Answer · 2016-03-27 16:45:16Z

2

Use regex. In JavaScript,

if (/^\d{1,10}(\.\d{2})?$/.test(product_price.value))
    // do stuff

This regex should match 1, 46871325, 18671.68 but not 46812547.178687.

Btw, you don't need maxlength and step attributes, just remove them :)

Fiddle

edited Mar 27, 2016 at 16:45

answered Mar 27, 2016 at 16:27

PDKnight

7227 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David784 Over a year ago

won't work for "100." would recommend /^\d{1,10}\.?\d{0,2}$/

PDKnight Over a year ago

@David784 of course it won´t, that´s not a valid decimal number, else he wasn´t asking for numbers you´ve made regex for.

David784 · Accepted Answer · 2016-03-27 14:08:23Z

1

Not sure if it's just me, but I couldn't get the step to work reliably. But it appears that validation will allow you to override the method for number (or any of its other types). So here's what I would probably do:

$.validator.methods.number = function(value,e) {
    return this.optional(e) || /^\d+\.?\d{0,2}$/.test(value)
};

The regex will verify that at least one number has been entered, optionally followed by a decimal point and up to two additional numbers.

And then remove the step:

<input type="text" id="product_price" name="product_price" maxlength="10" placeholder="Enter price">

answered Mar 27, 2016 at 14:08

David784

7,5243 gold badges24 silver badges35 bronze badges

7 Comments

Dilip chabaria Over a year ago

and at the starting i should include the script for additional methods right?

David784 Over a year ago

I'm sorry, I'm not sure what you mean. All you should have to change is to add the $.validator.methods statement somewhere in your $(document).ready(), above your $('#addForm').validate().

Dilip chabaria Over a year ago

maxlength has been fixed here to 10 .So after that it doesnt show up decimal numbers.Should i remove the maxlength attribute?

Dilip chabaria Over a year ago

can you provide a running snippet or on js fiddle ?

David784 Over a year ago

Here is a fiddle: https://jsfiddle.net/5kzh7ykz/6/

|

Collectives™ on Stack Overflow

Validating Decimal numbers using validation plugin

2 Answers 2

Fiddle

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related