CODEWITHSUNDEEP
javascripthtml
Bleron Mexhuani
Bleron Mexhuani

Reputation: 94

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

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>

Upvotes: 1

Views: 125

Answers (3)

Ande Caleb
Ande Caleb

Reputation: 1204

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...

Upvotes: 1

Bleron Mexhuani
Bleron Mexhuani

Reputation: 94

Must set oninput instead of onkeypress

Upvotes: 0

E-telier
E-telier

Reputation: 821

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

Upvotes: 2

Related Questions