HTML input element validation without any plugin

Question

I would like to do validate elements WITHOUT using any validation plugin. To start with, I defined:

<input type='number' required="required" id='amt_elmt' name='amt_elmt' />

But I can still type any text in this control (I expected only number can be typed inside it); it accepts blank value also.

What additional code might be required?

type='number' and the required attribute is supported in all browsers yet. If you want to validate it before sending it to serverside, you will need a javascript fallback. Works in Opera without javascript: http://jsfiddle.net/JvuLX/1/ — anderssonola, Nov 29 '11 at 14:03
I think @soderslatt means is *not* supported in all browsers yet — Eonasdan, Nov 29 '11 at 14:05
Right. That seems a typo. Actually I am looking for validation after pressing 'submit' button via javascript or JQuery. If it is not supported across the browsers, I have to use some good plugin for validation. Which one would you recommend? — Vineet, Nov 29 '11 at 14:14
sorry for the typo. Use Modernizr and a ployfill. Modernizr: http://www.modernizr.com/ List of bunch of polyfills, https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills. — anderssonola, Nov 29 '11 at 14:23
Check out the current state of HTML5 form validation compatibility: http://caniuse.com/#form-validation — a paid nerd, Nov 30 '11 at 05:15
@soderslatt no offense meant, btw. just clarifying for the users sake — Eonasdan, Nov 30 '11 at 13:24

score 1 · Answer 1 · answered Nov 29 '11 at 14:00

1

Number is an HTML5 input type. This is not yet correctly supported by all browsers, in most browsers you will be able to input anything.

If you want to block anything but numbers while users are typing you are going to need JavaScript on key presses.

If you want to validate after posting if only numbers are used you can use either JavaScript or PHP for this.

answered Nov 29 '11 at 14:00

Preau

903
7
10

hmmm. If it's not supported by all browsers, I have to use some good plugin for validation. Which one would you recommend? – Vineet Nov 29 '11 at 14:08
As Eonasdan mentioned in his answer you can use the jQuery library. – Preau Nov 29 '11 at 14:14
I have tested some libraries (www.position-relative.com, www.webreference.com). If you have tried something else which is simpler & flexible, pl. share. – Vineet Nov 29 '11 at 14:20

score 1 · Accepted Answer · edited May 23 '17 at 12:31

1

as others have mentioned Forms 2.0 or the new HTML5 input types are not supported by all browsers (see this link).

I recently answered another question dealing with the HTML 5 form elements. None of my desktop browsers (FF, Chrome, IE) or my mobile browsers (FF, Android default browser) attempted to validate that I was using numbers, or restricted it to numbers.

Your best bet is a javascript client side validations like jquery.validate or any other number of libraries to accomplish validation.

Edit: The link is to Microsoft's validation library that comes with Visual Studio but you can download it from there website and it works quite well. I can post code on how to use it if you need it

Edit2: Codez http://jsfiddle.net/qxsS8/

edited May 23 '17 at 12:31

Community

1
1

answered Nov 29 '11 at 14:12

Eonasdan

7,563
8
55
82

yep. I am thinking now, after reading your answers, to use some good plugin. Which one would you recommend? – Vineet Nov 29 '11 at 14:17
check my edit. I've linked to the library that comes with Visual Studio – Eonasdan Nov 29 '11 at 14:18
as you have offered in the answer, pl. post the code so that I can build on it further. Thanks. – Vineet Nov 29 '11 at 14:29
there you go. hope that helps – Eonasdan Nov 29 '11 at 15:05
That's what I was looking for. Thanks a lot. Another thing-- Whether the form will be submitted even if a field has wrong data (i mean it fails to validate). – Vineet Nov 30 '11 at 05:06
if I understand your last comment correctly, as with all client side validation, it will fail if the user has javascript turned off (duh) and a clever user can get around it. However, this validation script does not allow the form to be submitted if it fails validation (which is what you want). Again, as with all client side validation requires, you still need server side validation – Eonasdan Nov 30 '11 at 13:22

score 0 · Answer 3 · answered Nov 29 '11 at 13:58

0

Add Javascript event handlers for the events you want to handle (i.e. onkydown, onkeyup, ...). In those functions you can access the value of the input and remove the chars you don't want.

answered Nov 29 '11 at 13:58

Toni Toni Chopper

1,833
2
20
29

Actually I am looking for validation after pressing 'submit' button via javascript or JQuery. Seems that it is not supported across the browsers. If I have to use some good plugin for validation. Which one would you recommend? – Vineet Nov 29 '11 at 14:13

score 0 · Answer 4 · edited May 03 '16 at 21:42

You could use standard HTML5 form validation. Then to support older browsers use this Library:

https://github.com/ericelliott/h5Validate

This will use JavaScript to add support.

All you need to add into your page is the following code:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script src="jquery.h5validate.js"></script> // You will need to host this somewhere
<script>
    $(function () {
        $('form').h5Validate();
    });
</script>

It works across: Desktop: IE 9, 8, 7, 6, Chrome, Firefox, Safari, and Opera. Tested on Windows 7 and Mac. Mobile: iPhone, Android, Palm WebOS

Thanks a lot. Another thing-- Whether the form will be submitted even if a field has wrong data (i mean it fails to validate). — Vineet, Nov 30 '11 at 05:05

score -2 · Answer 5 · answered Dec 01 '11 at 12:08

Finally I found out that using javascript (and maybe jquery) is very flexible. (No dependency, no third-party error, which is hard to solve for the programmer, who does not know plugin's logic).

link to "javascript only form validation tutorial"

This link proved to be very useful. This may be helpful to others, hence posting as a separate answer to my own question.

HTML input element validation without any plugin

5 Answers5