How can I restrict form input to specific characters with a regex?

Question

I have a made a regex for user to only allow these characters to be input. If user writes for example '@' it should not allow it, but in my code if user press @ and than press the tab the '@' still remains there.

function onlyAlphabet(inputVal) {
  var patt = /^[a-zA-Z.123456789]+$/;
  
  if (patt.test(inputVal)) {
    document.getElementById('facebook').value = inputVal;
  } else {
    var txt = inputVal.slice(0, -1);
    document.getElementById('facebook').value = txt;
  }
}

<div class="form-group mb-3">
  <label for="exampleFormControlTextarea1" class="fw-bold my-1 fs-7" id="text-color1">Facebook</label>
  <input type="text" placeholder="Facebook" onkeypress="onlyAlphabet(value)" id="facebook" class="form-control" name="facebook" value="<?php echo $row['facebook'] ?>" style="padding-left: 0 !important; border: none; border-bottom: 1px solid #E8E8E8; border-radius: 0 !important;">
</div>

E-telier · Accepted Answer · 2022-01-28 14:34:46Z

2

You should add onchange="onlyAlphabet(value)" and onblur="onlyAlphabet(value)" to make sure it would be called in any circumstances

answered Jan 28, 2022 at 14:34

E-telier

8216 silver badges17 bronze badges

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

Comments

Ande Caleb · Accepted Answer · 2022-01-28 14:55:02Z

1

you could do it using any of these 3 ways -

1. onChange="onlyAlphabet(value)" - when the value of the input changes
1. onKeyUp="onlyAlphabet(value)" - or onKeyDown, when a key is released/pressed
1. onBlur="onlyAlphabet(value)" - when the focus leaves the input...

answered Jan 28, 2022 at 14:55

Ande Caleb

1,2041 gold badge15 silver badges41 bronze badges

Comments

Bleron Mexhuani · Accepted Answer · 2022-01-28 14:45:21Z

0

Must set oninput instead of onkeypress

answered Jan 28, 2022 at 14:45

Bleron Mexhuani

9614 bronze badges

Collectives™ on Stack Overflow

How can I restrict form input to specific characters with a regex?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related