-2

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?

Chen-Tsu Lin
  • 22,876
  • 16
  • 53
  • 63
rookJCR
  • 13
  • 1
  • 4

1 Answers1

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.

Joeytje50
  • 18,636
  • 15
  • 63
  • 95
  • 1
    Firefox 26.0 is perfectly happy to submit a form with a "number" `` field whose value isn't a number. – Pointy Feb 08 '14 at 15:06
  • @Pointy that's weird, I just checked http://caniuse.com/form-validation and it says FF should support it. After [testing it myself](http://jsbin.com/hireb/1/edit/) though, it does indeed seem to work just fine, not even recognising the input as CSS-`:invalid`. I've updated my answer (it doesn't seem to work in IE11 either). – Joeytje50 Feb 08 '14 at 15:11
  • Yes, it does work in Chrome. Personally I find the "number" input implementation in Chrome to be really ugly, so I only use "number" on touch-screen devices because there it also influences the on-screen keyboard layout. – Pointy Feb 08 '14 at 15:14
  • @Pointy [this answer](http://stackoverflow.com/a/4298216/1256925) apparently seems to do the trick: [demo](http://jsbin.com/hireb/2/). (got that link via [this answer](http://stackoverflow.com/a/5797289/1256925)) The advantage over just using the `type="text"` now is that you can in- and decrement via the up and down arrow keys, and the form validation in Chrome. – Joeytje50 Feb 08 '14 at 15:18
  • @Joeytje50 the validation seems to be working, but the preventDefault isn't having followed your instructions. – rookJCR Feb 08 '14 at 15:33
  • @rookJCR I've added a working demo to my answer. Does that help? The form only submits when your input contains numbers only. – Joeytje50 Feb 08 '14 at 15:39