Allow only AlphaNumeric, Dot, Underscore in Username using JavaScript
Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about the implementation how to allow only AlphaNumeric, Dot (Period) and Underscore characters in Username using JavaScript.
When the Submit Button will be clicked by the user, the Username in the TextBox will be validate using JavaScript and Regular Expression (Regex) and if the Username is invalid, the error message will be displayed next to the TextBox using JavaScript.
Code for HTML Page
On the HTML page there i will place Textbox control with the id named text_uname for entering the text (Alphabet, Numeric, Underscore, Dot) by the user. Here I will also place the control named span with the id named label_error to show the message or error message. Here I will also place the control named button with the id named btn_validate. When user will click on the submit button after entering the text in the texbox then a function named validate_uname will be called onclick event handler of the button, And it will be check if user enter the text as per validation then span control will display the message that entered text is valid on the other hand if user enter the text as per against validation then span control will display the message that entered text is invalid.
<input type="text" id="text_uname" />
<br />
<span id="label_error" style="color: red"></span>
<br />
<br />
<input type="button" id="btn_validate" value="Submit" onclick="validate_uname()" />
JavaScript function to allow only AlphaNumeric, Dot (Period) and Underscore in Username
When the Submit Button is clicked, the Username in the TextBox will be validated using JavaScript and Regular Expression (Regex) and if the Username is invalid, the error message will be displayed next to the TextBox using JavaScript.
<script type="text/javascript">
function validate_uname()
{
var username = document.getElementById("text_uname").value;
var lbl_error = document.getElementById("label_error");
lbl_error .innerHTML = "";
var expr = /^[a-zA-Z0-9._]*$/;
if (!expr.test(username))
{
lbl_error .innerHTML = "Enter only Alphabets, Numbers, Dot and Underscore";
}
else
{
lbl_error .innerHTML = "Valid Text";
}
}
</script>
Here i am giving the complete code for HTML page. You can copy and paste the code on your HTML page and enjoy the execution of the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
</style>
</head>
<body>
<input type="text" id="text_Uname" />
<br />
<span id="label_error" style="color: red"></span>
<br />
<br />
<input type="button" id="btnValidate" value="Submit" onclick="ValidateUsername()" />
<script type="text/javascript">
function ValidateUsername() {
var user_name = document.getElementById("text_Uname").value;
var lbl_error = document.getElementById("label_error");
lbl_error.innerHTML = "";
var expr = /^[a-zA-Z0-9._]*$/;
if (!expr.test(user_name))
{
lbl_error.innerHTML = "Enter only Alphabets, Numbers, Dot and Underscore";
}
else
{
lbl_error.innerHTML = "valid Text";
}
}
</script>
</body>
</html>
Conclusion: In above code, I explained that how to allow only AlphaNumeric, Dot (Period) and Underscore characters in Username using JavaScript. This code is very helpful for every developer. Bye bye and take care of you Developers. We will come back shortly with the new article.
Regards
Using Asp.net
Comments
Post a Comment