防止用户在输入字段中输入大于2位数字的值

Question

I have a HTML form field to get the month from the user.

<input type="text" placeholder="MM" size="2" name="month">

I need the field to accept only 2 digits. I tried Form validation, but it allows the user to enter more than 2 digits and then display the validation message. I don't need any validation messages for the field, but the user should be restricted to enter only 2 digits max. Is there a way we can do this using jquery?

Answer 1

 <input type="text" placeholder="MM" size="2" name="month" maxlength="2> 

The maxlength attribute;

<input type="text" placeholder="MM" size="2" maxlength="2" name="month">

It limits the amount of text you can enter by straight up not allowing you to type more.

EDIT: added snippet

Answer 2

The easiest is using the type='number' attribute and setting max='12' :

<input type='number' max='12' min='1'>

SNIPPET

 input { width: 4ex; padding: 0 1px; } input:last-of-type { width: 6.5ex; } 

 <fieldset> <legend>Enter Date</legend> <label>Month:</label> <input type='number' max='12' min='1'> <label>Day:</label> <input type='number' max='31' min='1'> <label>Year:</label> <input type='number' max='3000' min='2016'> </fieldset> 

Answer 3

This should help you out, whenever the user presses the key down it will check the lenght and then trim the extra chars if there are any:

$("input").keydown(function() {
    var value = $(this).val();
    if(value.length > 2) {
        value = value.substring(0, 2);
        $(this).val(value);
    }
});