Username Validation In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of username validation in JavaScript, there are many ways with help of which we can apply validation on username using JavaScript.
Let us see the way which we are going to show with the help of the example given below.
Step By Step Guide On Username Validation In JavaScript :-
Here, below we are going to integrate HTML codes with JavaScript codes.
HTML codes are used to create input fields whereas with JavaScript we are going to apply validations. The below example will help to understand this concept easily.
<html>
<head>
<title>
JavaScript Validations
</title>
</head>
<body>
<h1>
TalkersCode – JavaScript validation
</h1>
<h2>
Username validation in JavaScript
</h2>
<form id="form" method="post" name="form">
<div class="form-field">
<label for="username">Username:</label>
<input type="text" name="username" id="username" autocomplete="off">
</div>
<input type="submit" value="Submit">
</form>
<script>
const username = document.querySelector('#username');
const form = document.querySelector('#signup');
const checkUsername = () => {
let valid = false;
const min = 3,
max = 25;
const username = username.value.trim();
if (!isRequired(username)) {
showError(username, 'Please Enter the username.');
} else if (!isBetween(username.length, min, max)) {
showError(username, `Username must lie between ${min} and ${max} characters.`)
} else {
showSuccess(username);
valid = true;
}
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 user name with a button to submit.
- After that we write our JavaScript codes. In which we see that when our username 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 username 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 username 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 username in JavaScript.
I hope this tutorial on username validation in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
