Javascript Validation for Positive Integer Only Input

Question

I have two text boxes, in it will only be allowed positive integers. If any alphabetical values or any other characters (e.g. %$&*£") are entered, an error message should be displayed and the values must not render a table.

 <input type="button" value="total" name="B3" onclick="powerOf();">

This line allows for calculation to be made, how can this validation stop this from happening when the incorrect values are entered?? As of now minus numbers are calculated and entering alphabets produces an empty table which is not quite what I was going for:

(no1== no1.match(/^-\d+$/) ? alert("First number must be positive"): no1 = no1 ? no1 : 0);
        (no2== no2.match(/^-\d+$/) ? alert("Second number must be positive"): no2 = no2 ? no2 : 0)

        var range1 = parseInt(no1);
        var range2 = parseInt(no2);

Any ideas?

Answer 1

Note: you can do this simply via HTML5 form validation:

<input type="number" min="1">

Then you won't be able to submit the form unless the entered value is a number higher than 1. This only seems to work in Chrome though.

---

To answer your question, what you're looking for is event.preventDefault(). If you change your onclick function to:

 <input type="button" value="total" name="B3" onclick="powerOf(event);">

then you can run event.preventDefault() in the powerOf function, and when you run that, the event will be "cancelled". For example:

function powerOf(event) {
    if (!/^\d+$/.test(document.getElementById('input-1').value)) {
        event.preventDefault();
    }
}

that will cancel the click event when the value of the input with id="input-1" is not digits only.

See this demo for a working example.