How to prevent user to type more than 2 digits using JavaScript and JQuery

Question

I have a textbox that holds "From" month. (allows values between 1 and 12 only)

How could I prevent users so that when they try to type 3rd character, javascript would prevent users from typing more than 2 digits?

Here is what I have tried so far but I am not able to get desired result(following script does not work at all)

    $("#monthFromTextBox").bind("change", function (event) {
        var regex = /^\d{1,2}$/g;
        var monthFrom = $(this).find(".monthFrom").text();
        var yearFrom = $(this).find(".yearFrom").text();
        var monthTo = $(this).find(".monthTo").text();
        var yearTo = $(this).find(".yearTo").text();

        // Allow only 1 or 2 digits only
        if (regex.test(monthFrom) === false) {
            event.preventDefault();
            // alert("Month From value should have 1 or 2 digits only");
            return false;
        }
    });

No need to use such complicated logic, a simple attribute on the input element will do maxlength like esailija has posted. — aziz punjani
– aziz punjani, Commented May 25, 2012 at 14:33
This isn't really going to validate the input if that's what you're going for. They could still enter something like "15" for the month — pdizz
– pdizz, Commented May 25, 2012 at 14:39

Esailija · Accepted Answer · 2012-06-13 12:55:54Z

18

<input type="text" maxlength="2">

edited Jun 13, 2012 at 12:55

user142162

answered May 25, 2012 at 14:32

Esailija

140k24 gold badges280 silver badges328 bronze badges

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

3 Comments

aziz punjani Over a year ago

rlemon, why depend on javascript when you can get it done with html ?

dance2die Over a year ago

@rlemon: it's ok Esailija's answer solved the question ;) but cannot mark it as an answer within 10 minutes

Chris Pratt Over a year ago

umm, he doesn't need Javascript.

Mark Amery · Accepted Answer · 2015-04-09 13:52:56Z

8

for the luls... if you really wanted a JS answer..

$("#monthFromTextBox").on('keydown', function() {
    if (this.value.length > 1) {
        return false;
    }
});

edited Apr 9, 2015 at 13:52

Mark Amery

158k92 gold badges434 silver badges476 bronze badges

answered May 25, 2012 at 14:35

rlemon

17.7k14 gold badges95 silver badges126 bronze badges

5 Comments

Florian Margaine Over a year ago

I think you should use if ($(this).val().length > 1)

rlemon Over a year ago

lol... my bad. it isn't a troll answer :P it's valid... just not needed.

dance2die Over a year ago

I think this is a valid answer as well for me. I could use rlemon's logic to prevent users to enter invalid months or years.

Mark Amery Over a year ago

This is less pointless than you think - maxlength doesn't work if your input has type=number, so an approach like this is helpful for limiting the number of digits the user can type.

Mark Amery Over a year ago

Unfortunately, though, it's wrong - this also prevents the user from deleting characters with the delete or backspace keys once they've hit the max length, which is plainly undesirable.

Widor · Accepted Answer · 2012-05-25 14:34:47Z

1

I know you asked for a JavaScript solution but I don't think you need one.

Why not simply restrict the text box in HTML:

<input type="text" maxlength="2" size="10" value="" name="monthFromTextBox">

This way, you're covered even if JavaScript's turned off.

Just remember to verify it server-side too if it's an important restriction.

answered May 25, 2012 at 14:34

Widor

13.3k7 gold badges47 silver badges67 bronze badges

Collectives™ on Stack Overflow

How to prevent user to type more than 2 digits using JavaScript and JQuery

3 Answers 3

3 Comments

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Related