Checking if Text Input Pattern is Valid Using JavaScript

Question

The desired effect is such that when the user types in any character that is not a letter or a number, that character is immediately removed; thus causing the text cursor to not advance.

After already trying to look for solutions online myself, here is what I have so far:

<input type="text" id="job-name" maxlength="20" pattern="[a-zA-Z0-9]+" style="width:200px; text-align:center;">

document.getElementById('job-name').addEventListener('keydown', function () {
            if (!document.getElementById('job-name').validity.valid) {
                var text = document.getElementById('job-name').value;
                text = text.slice(0,-1);
                document.getElementById('job-name').value = text;
            }
        });

The problem is that the check of the 'valid' attribute is thus far always true and never false, regardless of the character typed in, for some reason. My expectation was that whenever the character that was just typed in does not conform to the pattern, the 'valid' should return false; otherwise, it is true.

Ele · Accepted Answer · 2018-03-25 03:13:24Z

1

Use the event input to accomplish that:

This approach uses the regex /[^a-z0-9]+/i.

Basically, for every input char/text, the handle will replace with empty the invalid char.

document.getElementById('job-name').addEventListener('input', function(e) {
  this.value = this.value.replace(/[^a-z0-9]+/i, '');
})

<input type="text" placeholder='Paste text, drag text or type text' id="job-name" maxlength="20" style="width:400px; text-align:center;">

answered Mar 25, 2018 at 3:13

Ele

33.8k7 gold badges43 silver badges80 bronze badges

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

Comments

Josiah Keller · Accepted Answer · 2018-03-25 03:09:35Z

0

Try using the input event instead of keydown.

document.getElementById('job-name').addEventListener('input', function () {
    if (!document.getElementById('job-name').validity.valid) {
        var text = document.getElementById('job-name').value;
        text = text.slice(0,-1);
        document.getElementById('job-name').value = text;
    }
});

answered Mar 25, 2018 at 3:09

Josiah Keller

3,6854 gold badges25 silver badges36 bronze badges

1 Comment

user8293395 Over a year ago

That worked; albeit strange to me why that worked. Why would using 'input' suddenly cause the mere act of checking the 'valid' attribute to suddenly not always return true?

Collectives™ on Stack Overflow

Checking if Text Input Pattern is Valid Using JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related