How To Validate Name In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of how to validate name in JavaScript, there are many ways with help of which we can apply validation on name using JavaScript.
Let us see the way which we are going to show with the help of the example given below.
Here, below we are going to integrate HTML codes with JavaScript codes.
Step By Step Guide On How To Validate Name In JavaScript :-
HTML codes are used to create input fields to enter name whereas with JavaScript we are going to check the name entered by username that it is valid or not.
The below example will help to understand this concept easily.
<html>
<head>
<title>
JavaScript Validations
</title>
</head>
<body>
<h1>
TalkersCode – JavaScript validation
</h1>
<h2>
How to validate name in JavaScript
</h2>
<form id="form" method="post" name="form">
<div class="form-field">
<label for="name">Name:</label>
<input type="text" name="name" id="name" autocomplete="off">
</div>
<input type="submit" value="Submit" onclick = "checkName()">
</form>
<script>
const name = document.querySelector('#name');
const checkName = () => {
let valid = false;
const min = 3,
max = 25;
const name = name.value.trim();
if (name == "") {
alert(" Please Enter name before continue ");
} else if ( max<= name.length <=min )) {
alert(" Name must lie between ${min} and ${max}");
} else {
alert(" Congratulations! Every thing is OK, Shortly you will be redirected to next step ");
}
return valid;
}
</script>
<script src="js/app.js"></script>
</body>
</html>- Here, above we show you an example in JavaScript.
- First, we here create a basic structure of HTML. For this, we use HTML, head, title, and body with a script tag. We hope you know about the basic structure of HTML and which HTML tag is used for which concept.
- Now, when we look inside the body tag. Here, we see some headings tags and a script tag. Heading tag again is a concept of HTML, whereas script relates to JavaScript.
- JavaScript is written always inside the script tag. Where the script is a paired tag so it also has a closing tag. Now inside these script tags, we write our JavaScript code.
- Here, as we see that we create a validation form in which we create a field for the name with a button to submit.
- After that we write our JavaScript codes. In which we see that when our name is null means when there is nothing to submit then our codes will show an error whereas on the other side when everything is ok means properly filled then it will redirect the user to the next page that is his/her dashboard.
- Now, another validation used on name is of minimum and maximum characters. From the above codes, we understand that our codes must lie between 3 to 25 characters. If this validation is not fulfilled then this will show an error that is of name length.
- One thing to note here is that we did not redirect the users to another page on successful submission
Conclusion :-
At last, in conclusion, here we can say that with this article’s help we can understand how to validate name in JavaScript.
I hope this tutorial on how to validate name in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
