CODEWITHSUNDEEP
javascripthtmlregexvalidationinput
user11137294
user11137294

Reputation:

Allow only numbers and letters to input string

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

Upvotes: 7

Views: 41549

Answers (5)

THENETSPIDER
THENETSPIDER

Reputation: 347

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)" />

Upvotes: 0

Adnane Ar
Adnane Ar

Reputation: 683

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

Upvotes: 1

Jan
Jan

Reputation: 2249

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;">

Upvotes: 7

Chiffie
Chiffie

Reputation: 621

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]*">

Upvotes: 6

Get Off My Lawn
Get Off My Lawn

Reputation: 36289

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>

Upvotes: 0

Related Questions