So I am making a Signup form:-

In that, I have a username field that should not allow characters like -, space, ", ' but I can't get that to happen.

I tried:- Slice method, substring method, regex, remove and split and join technique.

So code:-

function username(event) {
    text = document.getElementById('usname').value;
    key = event.key;
    if (key == ' ' || key == '"' || key == "'" || key == '-') {
        setTimeout(() => {
            let final = text.slice(0, -1);
            document.getElementById('usname').value = final';
        },0.005)
    }
}

This was my best approach was this but it removed two characters at once and if we spam space and then type a character, we get a space in the text which is invalid.

Any suggestions? Please don't report this as duplicate because I looked at so many StackOverflow questions and on google but couldn't find a proper working solution. If you want the full code please let me know in the comments, I will share a codepen.

Thanks in Advance

CodePudding user response：

You can use regular expression [Regex]

This regex will accept only alphabets and numbers , and remove special characters and spaces.

function username(event) {
  text = document.getElementById('usname').value;
  document.getElementById('usname').value = text.replace(/[^a-zA-Z0-9\w]/g, "");
}

<input type="text" onkeyup="username()" id="usname" />

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

EDIT

[^a-zA-Z0-9\w] is the same as [^\w] or just \W. All will allow , so [^a-zA-Z0-9] or [\W] would be better. – MikeM

You are right my friend, this much better.

function username(event) {
  text = document.getElementById('usname').value;
  document.getElementById('usname').value = text.replace(/[\W_]/g, "");
}

<input type="text" onkeyup="username()" id="usname" />

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

First of all, to give the best user experience to the user, you should inform the user with a hint text below the input box saying that these characters are not allowed.

It is recommended to have a validation on the input box, which will warn the user by highlighting the input box as red when the user inputs invalid characters, and not allowing to submit, rather than removing the characters from their entry without their knowledge.

For form validation, use a library like validator for detecting invalid characters. Example for validating username that should have only alpha numeric characters:

  validator.isAlphanumeric('fooBar123'); //=> true

CodePudding user response：

It can be as simple as, for example

const input = document.querySelector('input');

input.addEventListener('input', function () {
  this.value = this.value.replace(/[^a-z]/gi, '');
});

<input type="text">

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

which will disallow any characters other than a-z and A-Z.

If you want to allow digits, just change the regex to /[^a-z\d]/gi.