Allow only numbers and letters to input string

Question

I'm trying to avoid input of any marks except numbers and letters with input string on my page.php:

<input type="text" id="input"> 

From this answer only allow English characters and numbers for text input <input type="text" id="input" class="clsAlphaNoOnly"> :

$(document).ready(function () {
  $('.clsAlphaNoOnly').keypress(function (e) {  // Accept only alpha numerics, no special characters 
        var regex = new RegExp("^[a-zA-Z0-9 ]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        }

        e.preventDefault();
        return false;
    }); 
})

or this:

$(function(){
    $("#input").keypress(function(event){
        var ew = event.which;
        if(ew == 32)
            return true;
        if(48 <= ew && ew <= 57)
            return true;
        if(65 <= ew && ew <= 90)
            return true;
        if(97 <= ew && ew <= 122)
            return true;
        return false;
    });
});

in both cases string is clear, but I'm using two types of input with button click $("#btn").click(function() to process input and $(document).keypress(function(e) with hit on enter key on keyboard for same input. By some reason if I include this methods to avoid extra marks in string, pressing on enter key does not allows to input inserted value.

This way works fine:

<input type="text" id="input"  onkeypress="return (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode >= 48 && event.charCode <= 57)" />

but I want avoid extra code with html in page.php. I'm trying to figure out, what causes blocking of entering for inserted value with given methods

Answer 1

Would tell you may miss event parameter ?

Without jQuery works like this for me in 3 browsers:

function clsAlphaNoOnly (e) {  // Accept only alpha numerics, no special characters 
    var regex = new RegExp("^[a-zA-Z0-9 ]+$");
    var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    if (regex.test(str)) {
        return true;
    }

    e.preventDefault();
    return false;
}
function clsAlphaNoOnly2 () {  // Accept only alpha numerics, no special characters 
    return clsAlphaNoOnly (this.event); // window.event
}

<input type="text" id="input" onkeypress="clsAlphaNoOnly(event)" onpaste="return false;">
<input type="text" id="input" onkeypress="clsAlphaNoOnly2()" onpaste="return false;">

Answer 2

One way of validation is using pattern attribute on input element

MDN: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression

In your case:

<input type="text" pattern="[a-zA-Z0-9]*">

Answer 3

If you really do not want to use the Regex method as the comments bellow advice you, then you can use this simple code :

document.querySelector("input#testInput").addEventListener("input", function(){
  const allowedCharacters="0123456789azertyuiopqsdfghjklmwxcvbnAZERTYUIOPQSDFGHJKLMWXCVBNzáàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ "; // You can add any other character in the same way
  
  this.value = this.value.split('').filter(char => allowedCharacters.includes(char)).join('')
});

<input type="text" id="testInput">

Answer 4

Instead of javascript you could use a pattern along with required. pattern will allow you to specify a required pattern for the input, and required will make the input required. Both must evaluate to true in order for the form to submit.

<form>
  <input type="text" id="input" pattern="[a-zA-Z0-9]+" required> 
  <input type="submit">
</form>

Answer 5

HTML Input Way :

1- Simple HTML5 Input

<input type="text" pattern="[a-zA-Z0-9]*">

2- Inline Function

<input type="text" id="input"  onkeypress="return (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode >= 48 && event.charCode <= 57)" />

---

---

Jquery Way :

$('#ID').on('keypress', function (e) { var code = ('charCode' in e) ? e.charCode : e.keyCode; if (!(code > 47 && code < 58) && !(code > 64 && code < 91) && !(code > 96 && code < 123)) {e.preventDefault();}});

---

---

Javascript Function :

function allowAlphaNumericSpace(e) {
  var code = ('charCode' in e) ? e.charCode : e.keyCode;
  if ( !(code > 47 && code < 58) && !(code > 64 && code < 91) && !(code > 96 && code < 123)) { e.preventDefault();}};

<input type="text" onkeypress="allowAlphaNumeric(event)" />