All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Name Validation In JavaScript Using Regular Expression

Last Updated : Mar 11, 2024

Name Validation In JavaScript Using Regular Expression

In this tutorial we will show you the solution of name validation in JavaScript using regular expression, in last tutorial, we will understand about how to apply a simple validation on name using JavaScript.

In that tutorial, we understand about validation that the data is filled in our field or not.

But in this tutorial, we advance our validation and uses regular expressions to check the data filled by user is valid or not.

Step By Step Guide On Name Validation In JavaScript Using Regular Expression :-

Here, are mainly two ways to use regular expression validation. For use both we have to store the expression in a variable that we want or not want.

Hence, first way is by using the expression which we want to be filled whereas in second way we have to store expressions in a variable which we did not want from user to fill. Let us see the example below.

// name validation in JavaScript using regular expression
var regularExpressions = /^[a-zA-Z]+ [a-zA-Z]+$/;
var userName = document.getElementById('inputField').value;
if(!regularExpressions.test(userName)){
    alert(' Given name is invalid .');
}else{
    alert(' Given name is valid .');
}
  1. As we here see that we today write only JavaScript codes in our example.
  2. In previous tutorials, we already many times create a full code example in which we first create an html form with its basic structure. Inside that structure we use html, head, and title, body and script tags.
  3. In this example, we have to create a form with method type post and action of any page in which you want user to redirect.
  4. Inside that form, we have to create input fields. First one is of type text and second is of type submit. Inside input type text, user have to fill his/her first name and then have to click on submit button to check whether the name given by user is valid or not.
  5. We can use our JavaScript function using two ways. In first one we have to direct call the JavaScript function on Form action whereas another way is to use the JavaScript function on button click. Here, there are various ways to call the function.
  6. One thing to notice here that the JavaScript code in html is always written inside script tag. As we know script tag is a paired tag and it must have a closing tag. So, we have to use our JavaScript code inside script tag.
  7. Now, let us see our function. Here, as we can see that we choose the expressions that we want in our name field from user. So, first we store required expressions in a variable. Then we get the name that user fills inside a variable using JavaScript code.
  8. At last, our job is to check that data filled by user is valid or not. So, we compare the data which we want with data get from user using if condition. Here, if we the condition becomes true means the data filled by user does not matched with our requirement then browser will display a message with text Given name is invalid. Otherwise if the condition becomes false that the data matches with our requirement then browser will displays a message of Given Name is valid. We hope you understand the above codes easily with help of these steps.

Conclusion :-

At last in conclusion, here we can say that with the help of this article we are able to understand how to apply validation on name using regular expressions in JavaScript.

I hope this tutorial on name validation in JavaScript using regular expression helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪