I have an input field which is limited to 6 characters. How can I validate my input field so that a user can't put more than one decimal point (i.e. 19..12), plus it can only be to two decimal places as well (i.e. 19.123)?

This is my input field

<input type="text" name="amount" id="amount" maxlength="6" autoplete="off"/><span class="paymentalert" style="color:red;"></span>

Here is my validation script.

$(function(){
$("#amount").keypress( function(e) {
    var chr = String.fromCharCode(e.which);
    if (".1234567890NOABC".indexOf(chr) < 0)
        return false;
});
});

$("#amount").blur(function() {
    var amount = parseFloat($(this).val());
    if (amount) {
        if (amount < 40 || amount > 200) {
            $("span.paymentalert").html("Your payment must be between £40 and £200");
        } else {
            $("span.paymentalert").html("");
        }
    } else {
        $("span.paymentalert").html("Your payment must be a number");
    }
});

Jonah

I have an input field which is limited to 6 characters. How can I validate my input field so that a user can't put more than one decimal point (i.e. 19..12), plus it can only be to two decimal places as well (i.e. 19.123)?

This is my input field

<input type="text" name="amount" id="amount" maxlength="6" autoplete="off"/><span class="paymentalert" style="color:red;"></span>

Here is my validation script.

$(function(){
$("#amount").keypress( function(e) {
    var chr = String.fromCharCode(e.which);
    if (".1234567890NOABC".indexOf(chr) < 0)
        return false;
});
});

$("#amount").blur(function() {
    var amount = parseFloat($(this).val());
    if (amount) {
        if (amount < 40 || amount > 200) {
            $("span.paymentalert").html("Your payment must be between £40 and £200");
        } else {
            $("span.paymentalert").html("");
        }
    } else {
        $("span.paymentalert").html("Your payment must be a number");
    }
});

Jonah

• javascript

• Two questions: (1) Do you want it so that, if they have a decimal point, the MUST have 2 digits after it? (2) From your error message, there must be at least 2 digits before the decimal point, but no more than 3 digits, correct? – talemyn Commented Mar 6, 2013 at 16:25
• Any reason not to use digitalbush./projects/masked-input-plugin? – Matt Ball Commented Mar 6, 2013 at 16:25
• @talemyn 1)Yes 2) Correct. – Jonah Commented Mar 6, 2013 at 16:34
• Okay . . . answer below. :) – talemyn Commented Mar 6, 2013 at 16:34
• @matt-ball I want to keep it simple and have the javascript in one function. – Jonah Commented Mar 6, 2013 at 16:35

3 Answers 3

This should do :

var ok = /^\d*\.?\d{0,2}$/.test(input);

(if I correctly understood that you don't want more than 2 digits after the dot)

The code thus would be :

$("#amount").blur(function() {
    var input = $(this).val();
    if (/^\d*\.?\d{0,2}$/.test(input)) {
        var amount = parseFloat(input);
        if (amount < 40 || amount > 200) {
            $("span.paymentalert").html("Your payment must be between £40 and £200");
        } else {
            $("span.paymentalert").html("");
        }
    } else {
        $("span.paymentalert").html("Your payment must be a number");
    }
});

Assuming that:

1. There MUST have 2 digits after a decimal point, and
2. There must be at least 2 digits before the decimal point, but no more than 3 digits

The code you would use to match it would be:

var value = $(this).val;
value.match(/^\d{2,3}(\.\d{2})?$/i);

It would be much easier if you used the Masked Input Plugin for jQuery.