使用jQuery驗證在文本輸入中需要2個小數位

Question

我正在構建一個付款表單並使用jQuery驗證來執行我的驗證。 如果它有2位小數，我怎么才能驗證“付款金額”字段？ 如果用戶在金額上取消.00，我希望它失敗。

這是我的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();
        }
    });

});

我的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>

提前致謝！

Answer 1

可能現在回答已經太晚了，但這可以幫助某人。

請檢查這個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();
  }
});

這個解決方案來自JQuery，只允許小數點后的兩個數字

Answer 2

您必須使用.addMethod()方法創建自定義規則。

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");

演示： 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.
    });

});

---

否則，要驗證“美元和美分”，您可能希望使用已經屬於additional-methods.js文件的currency方法。 它驗證兩個小數位，您可以切換符號。

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

演示2： jsfiddle.net/jz5xLeu1/