JavaScript & HTML Forms Elements

Question

Using the HTML Form Elements, I would like to allow an input of "numeric" and it's decimal seperator characters into a textfield (either textarea or an input type="text") - ONLY!

Any non-numeric character should be ignored with no appearance in the parent element whatsoever, and then I will use that particular value to submit in my database tables.

Is this achiveable with JavaScript with jQuery's support, or not?

Any solution is quite acceptable and welcome!

Thanks in forwards, lads.

Problem with validation like this is that its very difficult to stop users copy-pasting into the text box, which will just get around your validating if you are checking typed characters. So to be safe you'd need to validate it again once they'd finished entering it. You'd also probably want to validate it on the server side if you're going to store it in a Database as Clientside validation isn't very dependable. — Jake, Jun 27 '11 at 13:56
yes yes, I will do that my friend, thanks for the tip! however, it's possible to check if user pasted the values ;) you can use matching the contents of the clipboard and the value just inputed, or you can catch keys, and ignore them as well, so you'll have a slitest bit of problems :) — metaforce, Jun 27 '11 at 13:59
possible duplicate of [How to allow only numeric (0-9) in html inputbox using jQuery?](http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery) — Felix Kling, Jun 27 '11 at 14:08
@Felix Kling, well it's a possible duplicate, however I don't use the search quite often though :) — metaforce, Jun 28 '11 at 10:11
@Felix Kling, OK, Felix. Thanks for the tip, as I will use it in the future more oftenly. — metaforce, Jun 28 '11 at 10:13
@ metaforce: There are many different ways of pasting to a text box other than the ones you described, last time I attempted to do this I found that not all browsers supported the events needed to capture all pastes. To be fair I didn't spend too long on it, so it may be possible to come up with some workaround solution. — Jake, Jun 28 '11 at 11:40

score 2 · Accepted Answer · answered Jun 27 '11 at 13:51

2

I'm a big fan of setting my HTML up to use the browser's HTML5 input/form validation types and then adding support for the lesser browsers (i.e. IE) via jQuery plugins.

Check this out: http://flowplayer.org/tools/validator/index.html

answered Jun 27 '11 at 13:51

Adam Terlson

12,610
4
42
63

Ash Burlaczenko · Answer 2 · 2013-07-20T16:42:25.280

2

I'm not sure about a JQuery solution but here's a pure JS answer.

HTML

<input type="text" onclick="check(this)"></input>

JavaScript

function check(obj)
{
    return(!isNaN(obj.value));
}

Hope this helps.

edited Jul 20 '13 at 16:42

answered Jun 27 '11 at 13:53

Ash Burlaczenko

24,778
15
68
99

1

isNaN() -- function name is case sensitive. – John Strickler Jun 27 '11 at 13:56

score 1 · Answer 3 · answered Jun 27 '11 at 13:51

1

Check out this jQuery plugin

Alphanumeric

answered Jun 27 '11 at 13:51

Chris

3,191
4
22
37

score 1 · Answer 4 · answered Jun 27 '11 at 13:52

1

Yes it is. Just google jQuery Masked Input and you will find a plethora of plug-ins that will allow you to do this.

answered Jun 27 '11 at 13:52

Dino Gambone

545
3
10

score 1 · Answer 5 · answered Jun 27 '11 at 13:52

1

Try http://www.mredkj.com/tutorials/validate2.html. you can use jQuery to bind the function handles to the HTML element events like blur,key up,etc.

P.S:There are many such function just a google search away.

answered Jun 27 '11 at 13:52

Santosh Gokak

3,393
3
22
24

score 1 · Answer 6 · answered Jun 27 '11 at 13:57

1

There are a number of Masked Edit plugins for jQuery, such as Text Box Filter that's quite configurable.

answered Jun 27 '11 at 13:57

PHeiberg

29,411
6
59
81

JavaScript & HTML Forms Elements

6 Answers6