How to prevent user from entering decimals?

I've got an order page on my site. Some order items can have decimal quantities, some can't.

What's the best way to prevent the user from entering 开发者_JAVA百科decimal quantities? (Apart from an alert box and setting the field to zero)?

Intercept key events for the field, detect illegal characters upon input, keep them from getting entered in the field and add a temporary msg near the field (inserted into the page) that explains what characters or values are allowed. pop up alerts are a bad way to give feedback in the middle of typing.

Then, validate again before submission because there are other ways to get data into fields (drag/drop, copy/paste, etc...) that you might not have caught everything.

Here's a jQuery example of both an integer only and a decimal only field with temporary messages displayed when invalid keys are typed:

Working jsFiddle: http://jsfiddle.net/jfriend00/CkDTy/

$(".integer").keypress(function(e) {
    if (e.which < 48 || e.which > 57) {
        showAdvice(this, "Integer values only");
        return(false);
    }
});

$(".decimal").keypress(function(e) {
    // 46 is a period
    if (e.which != 46 && (e.which < 48 || e.which > 57)) {
        showAdvice(this, "Decimal numbers only");
        return(false);
    }
    if (e.which == 46 && this.value.indexOf(".") != -1) {
        showAdvice(this, "Only one period allowed in decimal numbers");
        return(false);   // only one decimal allowed
    }
});

function showAdvice(obj, msg) {
    $("#singleAdvice").stop(true, false).remove();
    $('<span id="singleAdvice" class="advice">' + msg + '</span>').insertAfter(obj);
    $("#singleAdvice").delay(4000).fadeOut(1500);
}

Here's a little jQuery that prevents non-numerical inputs:

$(function() {
    $('input').bind('keyup', function(event) {
        var currValue = $(this).val();

        if(currValue.search(/[^0-9]/) != -1)
        {
            // Change this to something less obnoxious
            alert('Only numerical inputs please');
        }

        $(this).val(currValue.replace(/[^0-9]/, ''));
    });
});

You can add an event (on key press) and detect if a decimal point has been pressed by the user or not. Also on form submission, use regular expressions to check if the submitted data is correct (because the user can forge the data using live editor like firebug). Also make sure to double check that on your server side in case if user disabled javascript.

for example:

<input type="text" onkeypress="checkDecimal();" />
<input type="submit" onclick="checkBeforeSubmit();" />

function checkDecimal() {
    // your code goes here
}

function checkBeforeSubmit() {
    // your code goes here
}

You better to use the same function cause it's basically the same thing and invoke it from both events.

On server side, check the submitted data again