Using Regex to only allow certain characters in HTML input field seems not to work when starting with a not allowed character

Question

I am trying to only allow certain characters a user can type / copy into a HTML-<input> field by using following Regex:

return /^[A-Za-z0-9 ]*$/.test(value);

It works for me properly, but only if I start with an allowed character (e.g.: "A").

However, if I am starting with a character which isn't allowed by my Regex (e.g.: "!"), I suddenly can type in characters which should be disabled:

For testing I have created following fiddle: >>Click<<

Full script as reference:

<input type="text" class="polarion-TextBox" name="targetDocument" style="width: 100%;">

<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {

    window.setTimeout ( function() {  
    // Restricts input for the given textbox to the given inputFilter.
    function setInputFilter(textbox, inputFilter) {
      ["input"].forEach(function(event) {
        textbox.addEventListener(event, function() {
          if (inputFilter(this.value)) {
            this.oldValue = this.value;
            this.oldSelectionStart = this.selectionStart;
            this.oldSelectionEnd = this.selectionEnd;
          } else if (this.hasOwnProperty("oldValue")) {
            this.value = this.oldValue;
            this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
          }
        });
      });
    }

   // Restrict input to digits and '.' by using a regular expression filter.
  setInputFilter(document.getElementsByName("targetDocument")[0], function(value) {
  return /^[A-Za-z0-9 ]*$/.test(value); 

  });

    }, 1000);


}, false);  
</script>

Thanks your your comment. Unfortunately then I can type in disabled characters also after starting with an allowed character. — SteffPoint
– SteffPoint, Commented Oct 16, 2019 at 11:51
I can't type any non-allowed char when the field is empty in your fiddle. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Oct 16, 2019 at 11:57

AvcS · Accepted Answer · 2019-10-16 11:58:15Z

1

You don't have an oldValue when you enter any character for first time, so your code won't go into your second condition
Once your first character doesn't match, whatever you type next, the value never goes into first condition so oldValue is never set and as there is no existing oldValue your code won't go into second condition.

You can have an initial oldValue to empty string to fix this issue.

Add textbox.oldValue = ""; before textbox.addEventListener.

answered Oct 16, 2019 at 11:58

AvcS

2,34313 silver badges19 bronze badges

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

1 Comment

SteffPoint Over a year ago

That was it! Thanks for the explanation.

Anthony · Accepted Answer · 2019-10-16 12:11:18Z

This works for me:

function setInputFilter(textbox, inputFilter) {
  ["input"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        if (this.hasOwnProperty("oldValue")) {
          this.value = this.oldValue;
          this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
        } else {
          this.value = "";
          this.setSelectionRange(0, 0);
        }
      } else {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      }
    });
  });
}

window.addEventListener("DOMContentLoaded", function() {
  setInputFilter(document.getElementsByName("targetDocument")[0], function(
    value
  ) {
    return /[^A-Za-z0-9 ]/g.test(value);
  });
});

<input type="text" class="polarion-TextBox" name="targetDocument" style="width: 100%;">

Main change is clearing out the value if there is no oldValue to restore on invalid input. I also inverted the logic and return true if there are any invalid characters.

Collectives™ on Stack Overflow

Using Regex to only allow certain characters in HTML input field seems not to work when starting with a not allowed character

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related