Javascript/Jquery: validate input with a number range

Question

I'd like to validate an input field within a preconfigured range of numbers. Only numbers from 1 up to 24 are allowed.

How can I do?

With a custom solution like this:

    $('.field').keypress(function(event) {
        var val = parseInt($(this).val()) + HERE_I_SHOULD_SUM_THE_NEWLY_ADDED_DIGIT;
        if(val < 1 || val > 24) event.preventDefault();
    });

I'm able to retrieve the current input value. How can I add the newly added digit?

VisioN · Accepted Answer · 2012-06-20 14:02:25Z

11

How about something like this?

$("input").on("change", function() {
    var val = Math.abs(parseInt(this.value, 10) || 1);
    this.value = val > 25 ? 24 : val;
});

DEMO: http://jsfiddle.net/3jw4S/

answered Jun 20, 2012 at 14:02

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

3 Comments

VisioN Over a year ago

@MichDart What do you mean by doesn't work? Have you checked the demo? Do you consider that change event runs only when input element loses focus? If you need immediate reaction, then try keyup event: jsfiddle.net/3jw4S/1.

Mich Dart Over a year ago

Yes, It works when the input loses focus. Is it possible to change this behaviour to handle a keypress event? thanks

Mich Dart Over a year ago

Perfect! Just a little fix to this line: $(this).val(val > 24 ? 24 : val);

Christoph · Accepted Answer · 2012-06-20 14:47:40Z

2

There are builtin functionalities for inputs in modern browsers:

A comprehensive overview can be found here: http://www.the-art-of-web.com/html/html5-form-validation/

Basically, you could write:

<input type="number" min="1" max="24" step="1" required>

with pattern you can define regular expressions to test against:

pattern="\d[0-3]"

Example

edited Jun 20, 2012 at 14:47

answered Jun 20, 2012 at 14:13

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

3 Comments

Mich Dart Over a year ago

I know, but I need some fallbacks

Christoph Over a year ago

@MichDart then define these attributes and evaluate them with javascript if the browser can't handle it. Thats the best solution.

Christoph Over a year ago

@MichDart i updated the fiddle, this should be the way to go to be compatible to medern browser without leaving the old ones behind.

Alex W · Accepted Answer · 2012-06-20 14:35:40Z

1

There's a plugin for JQuery that can help you with validation called Valid8:

http://unwrongest.com/projects/valid8/

You will need to use a regular expression such as this one:

^([1-9]|[1]?[1-9]?|[2][0-4]|10)$

edited Jun 20, 2012 at 14:35

answered Jun 20, 2012 at 13:59

Alex W

38.5k13 gold badges114 silver badges115 bronze badges

4 Comments

Graham Over a year ago

And this is true for 0... sorry ;)

Mich Dart Over a year ago

That's also a great solution. However, I need a more immediate reaction.

Graham Over a year ago

I'm really not meaning to be a dick but the current edit returns false for 10. For a numeric range its probably easier to cast the value to an integer for numeric comparison.

Alex W Over a year ago

Thanks. I haven't used regular expressions in years so I'm trying to get back in the game.

Ben McCormick · Accepted Answer · 2012-06-20 14:01:29Z

0

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x <1|| x >24)
  {
  alert("Value must be between 1 & 24");
  return false;
  }
}

Something along those lines should work

answered Jun 20, 2012 at 14:01

Ben McCormick

25.8k12 gold badges56 silver badges71 bronze badges

1 Comment

Mich Dart Over a year ago

I cannot submit the form. I'm working with ajax. Is it possible to check for validation during input insertion?

Clyde Lobo · Accepted Answer · 2012-06-20 14:08:40Z

0

Try this

function validate() {
 var x = parseInt(value,10) // its the value from the input box;
 if(isNaN(x)||x<1||x>24)
 {
  alert("Value must be between 1 and 24");
  return false;
  }
}

answered Jun 20, 2012 at 14:08

Clyde Lobo

9,1747 gold badges37 silver badges63 bronze badges

Collectives™ on Stack Overflow

Javascript/Jquery: validate input with a number range

5 Answers 5

3 Comments

3 Comments

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

3 Comments

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related