In this article I will explain with an example, how to allow only
AlphaNumeric,
Dot (Period) and
Underscore characters in
Username using
JavaScript.
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.
HTML Markup
The HTML Markup consists of an
HTML TextBox, SPAN element and a Button.
Button
The Button has been assigned an
OnClick event handler which calls the
ValidateUsername JavaScript function.
<input type="text" id="txtUsername" />
<br />
<span id="lblError" style="color: red"></span>
<br />
<br />
<input type="button" id="btnValidate" value="Submit" onclick="ValidateUsername()" />
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 ValidateUsername() {
var username = document.getElementById("txtUsername").value;
var lblError = document.getElementById("lblError");
lblError.innerHTML = "";
var expr = /^[a-zA-Z0-9._]*$/;
if (!expr.test(username)) {
lblError.innerHTML = "Only Alphabets, Numbers, Dot and Underscore allowed in Username.";
}
}
</script>
Screenshot
![Allow only AlphaNumeric, Dot (Period) and Underscore in Username using JavaScript]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
