How to validate all textboxes of the web form on button click event using JavaScript


In this article I have explained about validating all textboxes in the web form when user click's on a button.

In this article I have explained about validating all textboxes in the form when use clicks on a button. I have explained if any one of the textbox is empty it displays the error message. You can use the same code for other regular expressions not only for null check. Logic would be same but regular expression varies.

Steps to do this:

• Create new Vs project
• Add Label and Button
• Add textboxes as many as you want
• Use the following JavaScript function which validates all the textboxes
• Call this JavaScript function under OnClientClick event of Button
• Build and run the solution


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!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="Validation" runat="server">

<title>Validation</title></head><body> <!-- title of the page!-->

<form id="form1" runat="server"> <div>

<asp:Label ID="lblMessage" runat="server" Text="Enter the Input:"></asp:Label>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>

</div>

<asp:Button ID="Button1" runat="server" Text="Validate" OnClientClick="javascript:validateAllTextBoxes();"/>
</form></body></html>



<script type="text/javascript">

//The following function validates all the textboxes exists in the form
function validateAllTextBoxes() {
//The following valiable lists all the input controls
var inputControls = document.getElementsByTagName("input");

for (i = 0; i < inputControls.length; i++) {

// The following checkes whether its a textbox or not and its empty or not

if (inputControls[i].type == "text" && inputControls[i].value == "") {
alert("Enter Value in " + inputControls[i].name);
break;
}
}

}
</script>


Comments

Guest Author: nisha09 Apr 2013

Hello sir, this is very useful code, thanks :)
but my requirement is to check the text box which are under different panels and only one panel is visible at a time. This code works fine with currently visible panel only. kindly advise the changes. Thanks



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: