How to validate name using regex onkeypress in JavaScript

In this article we will learn how to validate number, textbox, and email in JavaScript. There are different types of way to use validation event like. onkeypress, onclick,  onkeyup  etc, but we should use event according to our requirement.

Ways to use

There are different types of way to use validation but following is given some points.  

  • By using Regex
  • By Using Ascii Code

By using Regex :

We will learn how to use regex; basically it is the combination of special character, number and alphabet.

  1. Mobile Number validation using regex onkeypress in JavaScript
  2. Textbox validation using regex onkeypress in JavaScript
  3. Alpha numeric validation using regex onkeypress in JavaScript
  4. Email validation using regex onkeypress in JavaScript

Mobile Number validation using regex onkeypress in JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Only Alphabets Validation using regex.</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<label>Enter Mobile Number</label>
<input type="text" id="txtName" maxlength="10" />
<span id="lblError" style="color: red"></span>
<script type="text/javascript">
    $(function () {
        $("#txtName").keypress(function (e) {
var keyCode = e.keyCode || e.which;
$("#lblError").html("");
            //Regex for Valid Characters i.e. Numbers.
            var regex = /^[0-9]+$/;
            //Validate TextBox value against the Regex.
            var isValid = regex.test(String.fromCharCode(keyCode));
            if (!isValid) {
                $("#lblError").html("Only Numbers allowed.");
            }
            return isValid;
        });
    });
</script>
<hr>
<p>Note: Only Number is allowed ( not Accepted Alphabet )</p>
</body>
</html>

Textbox validation using regex onkeypress in JavaScript

<!DOCTYPE html>
<html>
<head>
   <title>Only Alphabets Validation using regex.</title>
</head>
<body>
<label>Enter Your Name</label>
<input type="text" id="txtName" onkeypress="return TextValidate(event);" />
<span id="lblError" style="color: red"></span>
<script type="text/javascript">
   function TextValidate(e) {
       var keyCode = e.keyCode || e.which;
       var lblError = document.getElementById("lblError");
       lblError.innerHTML = "";
       //Regex for Valid Characters i.e. Alphabets.
       var regex = /^[A-Za-z]+$/;
       //Validate TextBox value against the Regex.
       var isValid = regex.test(String.fromCharCode(keyCode));
       if (!isValid) {
           lblError.innerHTML = "Only Alphabets allowed.";
       }
       return isValid;
   }
</script>
<hr>
<p>Note: Only alphabet is allowed ( not Accepted number )</p>
</body>
</html>

Alpha numeric validation using regex onkeypress in JavaScript

<!DOCTYPE html>
<html>
<head>
   <title>Alpha Numeric validation Example</title>
</head>
<body>
<label>Enter only Alpha numeric Character</label><br><br>
<input type="text" id="txtName" onkeypress="return ValidateAlphanumeric(event);" />
<span id="lblError" style="color: red"></span>
<script type="text/javascript">
   function ValidateAlphanumeric(e) {
       var keyCode = e.keyCode || e.which;
       var lblError = document.getElementById("lblError");
       lblError.innerHTML = "";
       //Regex for Valid Characters i.e. Alphabets and Numbers.
       var regex = /^[A-Za-z0-9]+$/;
       //Validate TextBox value against the Regex.
       var isValid = regex.test(String.fromCharCode(keyCode));
       if (!isValid) {
           lblError.innerHTML = "Only Alphabets & Numbers allowed.";
       }
       return isValid;
   }
</script>
<hr>
<p>Note: No special character allowed ( only allowed alphabet and number )</p>
</body>
</html>

Email validation using onkeypress in JavaScript

<!DOCTYPE html>
<html>
<head>
   <title>Only Email Validation using regex.</title>
</head>
<body>
<label>Enter Email Id</label>
<input type="text" id="txtEmail" onkeyup="EmailValidate();" />
<span id="lblError" style="color: red"></span>
<script type="text/javascript">
   function EmailValidate() {
       var email = document.getElementById("txtEmail").value;
       var lblError = document.getElementById("lblError");
       lblError.innerHTML = "";
       var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
       if (!expr.test(email)) {
           lblError.innerHTML = "Invalid Email Id";
       }
   }
</script>
<hr>
<p>Note: Only email id format is allowed ( Like: xyz@gmail.com )</p>
</body>
</html>

By using ASCII Code.

Following is the second example, in this validation is performed with ASCII Code (A-Z ) Capital Letter is (65 to 90) And Small Letter( a-z) is ( 97-123). it is easy to use only we have to put this code in function.

  1. How to Validate Number using onkeypress in JavaScript
  2. How to Validate name using onkeypress in JavaScript
  3. How to Validate zipcode using onkeypress in JavaScript

 

How to Validate number using onkeypress in JavaScript

<!DOCTYPE html>
<html>
     <head>
<title>How to Validate Number using onkeypress in JavaScript</title>
</head>
<body>
<form>
<label class="label">Number Validation:</label>
<input type="text" name=""  onKeyPress="return ValidateAlpha(event);">
<script type="text/javascript">
   function ValidateAlpha(evt){
       var keyCode = (evt.which) ? evt.which : evt.keyCode
       if ((keyCode < 65 || keyCode > 90) && (keyCode < 97 || keyCode > 123) && keyCode != 32)
       return false;
       return true;
       }
</script>
</form>
<hr>
<p>Note: To check validation input any number in textbox.( Only accept text )</p>
</body>
</html>

How to Validate name using onkeypress in JavaScript

<!DOCTYPE html>
<html>
  <head>
        <title>How to Validate Name using onkeypress in JavaScript</title>
</head>
<body>
<form>
<label class="label">Name:</label>
<input type="text" name=""  onKeyPress="return ValidateAlpha(event);">
<script type="text/javascript">
  function ValidateAlpha(evt){
       var keyCode = (evt.which) ? evt.which : evt.keyCode
       if ((keyCode < 65 || keyCode > 90) && (keyCode < 97 || keyCode > 123) && keyCode != 32)
       return false;
       return true;
            }
</script>
</form>
</body>
</html>

How to Validate zipcode using onkeypress in JavaScript

<!DOCTYPE html>
<html>
<head>
   <title>Javascript validation onkeypress function</title>
</head>
<body>
<script>
function isNumberKey(evt){
   var charCode = (evt.which) ? evt.which : event.keyCode
   if (charCode > 32 && (charCode < 48 || charCode > 57)||(charCode==32))
      return false;
      return true;
}
</script>
<input type="text"  name="zipcode" id="zipcode" onkeypress="return isNumberKey(event);"/>
</body>
</html>
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere