In this article I will explain with an example, how to validate multiple TextBoxes using JavaScript on Button Click in ASP.Net.
HTML Markup
The following HTML Markup consists of an HTML Table with some TextBoxes and a Button.
The TextBoxes which needs to be validated are assigned CssClass required and they also have their associated HTML SPAN elements for displaying failed validation message.
The Button has been assigned an OnClientClick event handler to call a JavaScript function named Validate.
<table id="tblForm" border="0" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3">Details Form</th>
</tr>
<tr>
<td>First Name:</td>
<td><asp:TextBox ID="txtFirstName" runat="server" CssClass = "required"></asp:TextBox></td>
<td><span class="error" style="display: none">First Name is required.</span></td>
</tr>
<tr>
<td>Last Name:</td>
<td><asp:TextBox ID="txtLastName" runat="server" CssClass = "required"></asp:TextBox></td>
<td><span class="error" style="display: none">Last Name is required.</span></td>
</tr>
<tr>
<td>Phone Number:</td>
<td><asp:TextBox ID="txtPhoneNumber" runat="server"></asp:TextBox></td>
<td></td>
</tr>
<tr>
<td>Email Address:</td>
<td><asp:TextBox ID="txtEmail" runat="server" CssClass = "required"></asp:TextBox></td>
<td><span class="error" style="display: none">Email Address is required.</span></td>
</tr>
<tr>
<td></td>
<td><asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClientClick="return Validate();" /></td>
<td></td>
</tr>
</table>
Validate Multiple TextBoxes using JavaScript on Button Click
When the Button is clicked, the JavaScript Validate function gets called. First all the HTML INPUT elements are fetched from HTML Table and then a loop is run over the fetched elements.
Inside the loop, a check is performed to determined, whether the HTML INPUT element is a TextBox and also whether it has a CssClass named required.
When both the conditions are TRUE, the TextBox is validated and if the validation fails i.e. if the TextBox is left blank, its associated HTML SPAN element within the same HTML Table row is displayed.
<script type="text/javascript">
function Validate() {
var isValid = true;
//Reference the Table.
var tblForm = document.getElementById("tblForm");
//Reference all INPUT elements in the Table.
var inputs = document.getElementsByTagName("input");
//Loop through all INPUT elements.
for (var i = 0; i < inputs.length; i++) {
//Check whether the INPUT element is TextBox.
if (inputs[i].type == "text") {
//Check whether its Value is not BLANK and Validation is required.
if (Trim(inputs[i].value) == "" && inputs[i].className.indexOf("required") != 1) {
//If Validation has FAILED, show error message.
isValid = false;
ShowHideError(inputs[i], "block");
} else {
//If Validation is SUCCESS, hide error message.
ShowHideError(inputs[i], "none");
}
}
}
return isValid;
};
function ShowHideError(textbox, display) {
var row = textbox.parentNode.parentNode;
var errorMsg = row.getElementsByTagName("span")[0];
if (errorMsg != null) {
errorMsg.style.display = display;
}
};
function Trim(value) {
return value.replace(/^\s+|\s+$/g, '');
};
</script>
Css Class for Error Message
<style type="text/css">
.error
{
color: Red;
}
</style>
Screenshot
![Validate Multiple TextBoxes using JavaScript on Button Click in ASP.Net]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
