Validation for HTML5 Input Range

Question

How can I add validation for the HTML5 input type range?

It should not be 0. How can I add a warning message, like the default validation messages on other HTML5 input types?

Check this link w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_range — Chirag Vidani
– Chirag Vidani, Commented Apr 11, 2014 at 13:17

heinkasner · Accepted Answer · 2014-04-11 13:33:50Z

1

Example: <input type="number" size="6" name="age" min="18" max="99" value="21">

Some more examples: HTML5 Validation Types

answered Apr 11, 2014 at 13:33

heinkasner

4356 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Leopold Kristjansson Over a year ago

The example you gave is input type="number". The question is about input type="range".

coliff · Accepted Answer · 2014-04-11 16:58:27Z

1

I'd add the pattern attribute:

pattern="[1-1000]"

That requires a number entered between 1 and 1000

I'd also add:

required="required"

answered Apr 11, 2014 at 16:58

coliff

1,06412 silver badges14 bronze badges

Comments

Dekron · Accepted Answer · 2014-04-11 13:33:10Z

-1

You can check if the user press the key with an eventlistener via jquery and prevent the use of it

$("input").addEventListener("keypress", function (evt) {
        /*your condition*/
        if ( evt.which == /*your keycode*/ )
        {
            evt.preventDefault();
            alert(); /*you error message/code*/
        }
    });

http://www.webonweboff.com/tips/js/event_key_codes.aspx

edited Apr 11, 2014 at 13:33

answered Apr 11, 2014 at 13:26

Dekron

1,2129 silver badges27 bronze badges

Collectives™ on Stack Overflow

Validation for HTML5 Input Range

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related