How to Validate Name Field Using jQuery and RegEx (Regular Expressions)

How to Validate Name Field Using jQuery and RegEx - Techmindseye

Before writing jQuery code we need to do some basic steps

1. Sample HTML code

<!DOCTYPE html>
<html>
  <head>
    <title>Validate Name Field</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <label>Name:</label>
    <input type="text" id="name">
    <br>
    <button id="submitButton">Validate</button>
  </body>
</html>

2. Include jQuery library from Google CDN

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

3. Write RegEx (Regular Expressions) that accepts only alphabets (not accepting any numeric number and special characters)

/^[A-Za-z]+$/

Validate name field using jQuery and RegEx

1. On Button Click

<!DOCTYPE html>
<html>
  <head>
    <title>Validate Name Field</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
	    $(document).ready(function(){
	      $("#submitButton").click(function(){
	          if ($("#name").val().replace(/ /g,"").match(/^[A-Za-z]+$/)) {
	            alert("User Name is Correct");
	          }
	          else if($("#name").val() == ""){
	            alert("You can not leave this blank");
	          }
	          else{
	            alert("Please Enter Only Alphabets");
	          }
	      });
	    });
	</script>
  </head>
  <body>
    <label>Name:</label>
    <input type="text" id="name">
    <br><br>
    <button id="submitButton">Validate</button>
  </body>
</html>

2. When Name Field Loses Focus

Move the cursor to another field or click anywhere on page:

<html>
  <head>
    <title>Validate Name Field</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
	    $(document).ready(function(){
	      $("#name").blur(function(){
	          if ($(this).val().replace(/ /g,"").match(/^[A-Za-z]+$/)) {
	            $("#nameValidationMsg").text("User Name is Correct");
	            $("#nameValidationMsg").css("color", "green");
	          }
	          else if($("#name").val() == ""){
	            $("#nameValidationMsg").text("You can not leave this blank");
	            $("#nameValidationMsg").css("color", "red");
	          }
	          else{
	            $("#nameValidationMsg").text("Please Enter Only Alphabets");
	            $("#nameValidationMsg").css("color", "red");
	          }
	      });
	    });
	</script>
  </head>
  <body>
    <label>Name:</label>
    <input type="text" id="name">
    <label id="nameValidationMsg"></label>
    <br><br>
    <label>Email:</label>
    <input type="text" id="email">
    <br><br>
    <button id="submitButton">Validate</button>
  </body>
</html>

3. On Key-Press

Just simply replace blur() method in previous example to keyup() method.

$("#name").keyup(function(){
  //actions as in previous code
});

Validate using all three method click, blur & keyup in one code

<html>
  <head>
    <title>Validate Name Field</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
	    $(document).ready(function(){
	      $("#name").on("blur keyup", function(){
	          if ($(this).val().replace(/ /g,"").match(/^[A-Za-z]+$/)) {
	            $("#nameValidationMsg").text("User Name is Correct");
	            $("#nameValidationMsg").css("color", "green");
	          }
	          else if($("#name").val() == ""){
	            $("#nameValidationMsg").text("You can not leave this blank");
	            $("#nameValidationMsg").css("color", "red");
	          }
	          else{
	            $("#nameValidationMsg").text("Please Enter Only Alphabets");
	            $("#nameValidationMsg").css("color", "red");
	          }
	      });
	      $("#submitButton").click(function(){
	          if ($("#name").val().replace(/ /g,"").match(/^[A-Za-z]+$/)) {
	            alert("User Name is Correct");
	          }
	          else if($("#name").val() == ""){
	            alert("You can not leave this blank");
	          }
	          else{
	            alert("Please Enter Only Alphabets");
	          }
	      });
	    });
	</script>
  </head>
  <body>
    <label>Name:</label>
    <input type="text" id="name">
    <label id="nameValidationMsg"></label>
    <br><br>
    <label>Email:</label>
    <input type="text" id="email">
    <br><br>
    <button id="submitButton">Validate</button>
  </body>
</html>

If you have any question please feel free to ask in comments

One Comment on “How to Validate Name Field Using jQuery and RegEx (Regular Expressions)”

  1. Hello! Do you use Twitter? I’d like to follow you if that would be okay.
    I’m definitely enjoying your blog and look forward to new posts.

Leave a Reply

Your email address will not be published. Required fields are marked *