I want to Use only Alphabets and restrict the no. of alphabets between 0 to 10 . I write regular expression for it but it is not working properly

user_16724029 0
Viewed 47

I want to Use only Alphabets and restrict the no. of alphabets between 0 to 10 . I write regular expression for it but it is not working properly.Actually it matching perfectly fine and gives error when i entered any other character except alphabets but when i cross the maximum limit i.e 10 then it is not giving any error for it .

This is my code -

$(document).ready(function() {
        $("#name").keypress(function (e) {
            var keyCode = e.keyCode || e.which;
 
            $("#nameError").html("");
 
            //Regex for Valid Characters i.e. Alphabets.
            var regex = /^[A-Za-z]{0,10}$/;
 
            //Validate TextBox value against the Regex.
            var isValid = regex.test(String.fromCharCode(keyCode));
            if (!isValid) {
                $("#nameError").html("Only Alphabets allowed and range is between 0 to 10.");
            }
 
            return isValid;
        });
    });
jquery regex
2 Answers

The reason you don't get an error when crossing 10 chars is because this part var isValid = regex.test(String.fromCharCode(keyCode)); only checks the character that you entered, which is 1 character.

What you can do is check that the 1 character that you add is in the range A-Za-z, and then use the regex ^[A-Za-z]{0,10}$ to check for the entered character plus what is already in the input field.

$(document).ready(function() {

  var name = $("#name");
  var nameError = $("#nameError");

  name.keypress(function(e) {
    var keyCode = e.keyCode || e.which;
    nameError.html("");

    //Regex for Valid Characters i.e. Alphabets.
    var regex = /^[A-Za-z]{0,10}$/;

    //Validate TextBox value against the Regex.
    var newChar = String.fromCharCode(keyCode);
    var isValidLength = regex.test(newChar + name.val());
    var isValidChar = /^[A-Za-z]$/.test(String.fromCharCode(keyCode));

    if (!isValidChar || !isValidLength) {
      nameError.html("Only Alphabets allowed and range is between 0 to 10.");
    }

    return isValidChar && isValidLength;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" id="name">
</form>
<div id="nameError"></div>

user_54249880

The comment in your code says:

// Validate TextBox value against the Regex.
var isValid = regex.test(String.fromCharCode(keyCode));

but you are validating just the single character from the key that was pressed.

Try:

// Validate TextBox value against the Regex.
var isValid = regex.test($("#name").val());

And, just for fun, here is a shorter version that keeps things simple:

$(document).ready(() => {
  $("#name").keypress(e => /^[A-Za-z]{0,10}$/.test(
    $("#name").val() + String.fromCharCode(e.which)
  ));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name">

The event handler will return false and prevent the character from being displayed if the regex test fails.

user_15655120
Related