I am making a Signup form.
In that, I have a username field that should not allow the characters -, space, ", ' but I can't get that to happen.
I tried:- Slice method, substring method, regex, remove and split method 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.
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" />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" />EDIT
I don't want other symbols to be removed I just want these:- the dash(-), space, single and double quotes(',"). – Shaurya Shrimal
Add the symbols you want to remove in regex /[-'" ]/g
function username(event) {
text = document.getElementById('usname').value;
document.getElementById('usname').value = text.replace(/[-'" ]/g, "");
}<input type="text" onkeyup="username()" id="usname" />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