Javascript to check input value

Question

I am looking for a javascript function that when using onblur it validates that the text input is a number only with no decimal points or special characters. I have been able to find a few things, but none of them have worked thus far.

Here's what I have for the input fields:

  <tr>
<td width="312"><strong>Cash on Hand</strong></td>
<td width="188">$
  <input type="text" onchange="updateassets()" value="0" maxlength="11" name="CashOnHand" /></td>

Any help would be greatly appreciated.

Answer 1

Use below method onKeyUp event, this will not allow any characters on input field

function numericOnly(e)
{
    var val = e.value.replace(/[^\d]/g, "");
    if(val != e.value)
        e.value = val;
}

Input field code

<input type="text" onchange="updateassets()" onKeyUp="numericOnly(this)" value="0" maxlength="11" name="CashOnHand" />

Answer 2

I like to separate the structure (HTML) from the function (JS). That's why there's no "onchange" attribute in the input element.

HTML

<input type="number" name="cashOnHand" value="0" maxlength="11" />

JS

 function checkInputInteger() {
        // Check if the input value is an integer
        if (this.value == parseInt(this.value)) {
            // The value is an integer
            console.log('Input ' + this.name + ' is an integer');
        }
        else {
            // The value is not an integer
            console.log('Input ' + this.name + ' is not an integer');
        }
    }

    // Get the input from DOM (getElementsByName returns a list)
    input = document.getElementsByName('cashOnHand')[0];
    // Bind the blur event to checkInputInteger
    input.addEventListener('blur', checkInputInteger, false);

Answer 3

HTML

<form>
 <input type="text" id="txt" />
</form>

JS

(function(a) {
a.onkeypress = function(e) {
    if (e.keyCode >= 49 && e.keyCode <= 57) {}
    else {
        if (e.keyCode >= 97 && e.keyCode <= 122) {
            alert('Error');
            // return false;
        } else return false;
    }
};
})($('txt'));

function $(id) {
return document.getElementById(id);
}

Hope it helps you

Answer 4

Given:

<input onchange="updateassets()" value="0" ...>

you can make life easier by passing a reference to the element to the function using this:

<input onchange="updateassets(this)" value="0" ...>

and the validation function can be:

function validateIsInteger(element) {

  if (/\D/.test(element.value)) {

    // the element value contains non–digit values

  } else {

    // the element value is only digits

  }
}

Using the change event is a good idea, as if the value hasn't changed, you don't need to check it.