Require 2 decimal places in text input with jQuery validation

Question

I'm building a payment form and using jQuery validate to perform my validation. How can I validate the "Payment Amount" field only if it has 2 decimal places? I want it to fail if the user leaves off the .00 on the amount.

Here's my Javascript:

$(document).ready(function () {

    $('#payment-form').validate({ // initialize the plugin
        rules: {
            order_id: {
                required: true
            },
            price: {
                required: true,
                number: true
            }
        },
        messages: {
            order_id: "Please enter your Invoice Number",
            price: "Please enter Payment Amount"
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
            //form.submit();
        }
    });

    $('#price').keypress(function(event) {
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
        if(     ($(this).val().indexOf('.') != -1) &&   ($(this).val().substring($(this).val().indexOf('.'),$(this).val().indexOf('.').length).length>2 )         ){
            event.preventDefault();
        }
    });

});

And my HTML:

<form id="payment-form" class="user-forms" method="post">
  <p class="invoice">
    <label for="order_id">Invoice Number<font color="red" title="This field is marked as required by the administrator.">*</font></label>
    <input class="text-input" name="order_id" type="text" id="order_id" value="">
  </p>
  <p class="payment">
    <label for="price">Payment Amount<font color="red" title="This field is marked as required by the administrator.">*</font></label>
    <input class="text-input" name="price" type="text" id="price" value="">
    <span class="wppb-description-delimiter">You must enter an amount to 2 decimal places (i.e. 19.00)</span>
  </p>
  <hr/>
  <p class="form-submit">
    <input type="hidden" name="cust_id" value="<?php echo $current_user->user_firstname . ' ' . $current_user->user_lastname; ?>">
    <input type="hidden" name="email" value="<?php echo $current_user->user_email; ?>">
    <input name="finalize_payment" type="submit" id="finalize_payment" class="submit button btn btn-blue" value="Finalize Payment">
  </p>
</form>

Thanks in advance!

Answer 1

You must create a custom rule using the .addMethod() method.

jQuery.validator.addMethod("dollarsscents", function(value, element) {
    return this.optional(element) || /^\d{0,4}(\.\d{0,2})?$/i.test(value);
}, "You must include two decimal places");

DEMO: http://jsfiddle.net/w62Fb/

$(document).ready(function () {

    jQuery.validator.addMethod("dollarsscents", function(value, element) {
        return this.optional(element) || /^\d{0,4}(\.\d{0,2})?$/i.test(value);
    }, "You must include two decimal places");

    $('#payment-form').validate({ // initialize the plugin
        rules: {
            order_id: {
                required: true
            },
            price: {
                required: true,
                number: true,
                dollarsscents: true
            }
        },
        // other options, etc.
    });

});

---

Otherwise, to validate "dollars and cents", you might want to use the currency method that's already part of the additional-methods.js file. It validates two decimal places and you can toggle the symbol.

price: {
    required: true,
    currency: ['$', false] // false = dollar symbol not required
}

DEMO 2: jsfiddle.net/jz5xLeu1/

Answer 2

May be It's too late to answer but this could help someone.

Please check this Jsfiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="number"/>

 $('.number').keypress(function(event) {
  if ((event.which != 46 || $(this).val().indexOf('.') != -1) &&
    ((event.which < 48 || event.which > 57) &&
      (event.which != 0 && event.which != 8))) {
    event.preventDefault();
  }

  var text = $(this).val();

  if ((text.indexOf('.') != -1) &&
    (text.substring(text.indexOf('.')).length > 2) &&
    (event.which != 0 && event.which != 8) &&
    ($(this)[0].selectionStart >= text.length - 2)) {
    event.preventDefault();
  }
});

This solution is from JQuery allow only two numbers after decimal point