Post
Ask Question

Validate ASP.NET Form Using JavaScript

Introduction
 
The main use of JavaScript is to reduce unnecessary round trips between the client and the server. It means the application will be more responsive because the load on the server is reduced. JavaScript uses the client machine processing power.
 
Open Visual Studio
 
 







Design the form

Now design the form and code for the validation using JavaScript as described in the following:



  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ValidForm.aspx.cs" Inherits="DemoApplication.ValidForm" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>Valid Form</title>  
  8.     <script type="text/javascript">  
  9.         function ValidateForm()  
  10.         {  
  11.             var ret = true;  
  12.             if(document.getElementById("TxtName").value=="")  
  13.             {  
  14.                 document.getElementById("LblName").innerText = "Name is Required";  
  15.                 ret = false;  
  16.             }  
  17.             else  
  18.             {  
  19.                 document.getElementById("LblName").innerText = "";  
  20.             }  
  21.   
  22.             if (document.getElementById("TxtEmail").value == "")  
  23.             {  
  24.                 document.getElementById("LblEmail").innerText = "Email is Required";  
  25.                 ret = false;  
  26.             }  
  27.             else  
  28.             {  
  29.                 document.getElementById("LblEmail").innerText = "";  
  30.             }  
  31.   
  32.             if (document.getElementById("TxtCity").value == "") {  
  33.                 document.getElementById("LblCity").innerText = "City is Required";  
  34.                 ret = false;  
  35.             }  
  36.             else {  
  37.                 document.getElementById("LblCity").innerText = "";  
  38.             }  
  39.             return ret;  
  40.         }  
  41.     </script>  
  42. </head>  
  43. <body>  
  44.     <form id="form1" runat="server">  
  45.     <table style="border:2px solid black; font-family:Arial">  
  46.         <tr>  
  47.             <td>  
  48.                 <b>Name</b>  
  49.             </td>  
  50.             <td>  
  51.                 <asp:TextBox ID="TxtName" runat="server"></asp:TextBox>  
  52.                 <asp:Label ID="LblName" runat="server" ForeColor="Red"></asp:Label>  
  53.             </td>  
  54.         </tr>  
  55.         <tr>  
  56.             <td>  
  57.                 <b>Email</b>  
  58.             </td>  
  59.             <td>  
  60.                 <asp:TextBox ID="TxtEmail" runat="server"></asp:TextBox>  
  61.                 <asp:Label ID="LblEmail" runat="server" ForeColor="Red"></asp:Label>  
  62.             </td>  
  63.         </tr>  
  64.         <tr>  
  65.             <td>  
  66.                 <b>City</b>  
  67.             </td>  
  68.             <td>  
  69.                 <asp:TextBox ID="TxtCity" runat="server"></asp:TextBox>  
  70.                 <asp:Label ID="LblCity" runat="server" ForeColor="Red"></asp:Label>  
  71.             </td>  
  72.         </tr>  
  73.         <tr>  
  74.             <td colspan="2">  
  75.                 <asp:Button ID="BtnSubmit" runat="server" Text="Submit" OnClientClick="return ValidateForm()" />  
  76.             </td>  
  77.         </tr>  
  78.     </table>   
  79.     </form>  
  80. </body>  
  81. </html>  
Now Run the form

After doing that, let's run the application and input some invalid inputs (for example, submit with blank Text Box), then we will see that the form will not post-back because the function we defined in the <script> will return false and the ASP.NET form will not postback.





The form will now postback but then we will provide inputs for all the TextBox validated by our JavaScript function. 



Summary

This article is for beginners who want to use JavaScript to validate ASP.NET forms.


Similar Articles