In this article I will explain how to show small popup or beautiful style of validation messages or inline form validation messages when validation fails in asp.net using JQuery.
In one of the website I saw different type of form validations in registration form when we click on submit button without entering any data they are showing some small balloon type validation messages we can implement this functionality easily by using available JQuery plugins.
First open Visual Studio and create new website after that right click on your website and add new folder and give name as JS and insert script files in folder you should get it from attached folder same way add another new folder and give name as CSS and insert required css files in folder you should get it from attached folder. After that write the following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show Inline validation Messages</title>
<link href="css/template.css" rel="stylesheet" type="text/css" />
<link href="css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#form1").validationEngine();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table align="center">
<tr>
<td colspan="2">
<div style="border: 1px solid #CCCCCC; padding: 10px;">
<table cellpadding="0" cellspacing="30" style=" background-color:White">
<tr>
<td>First Name:</td>
<td><asp:TextBox ID="txtfname" runat="server" CssClass="validate[required]"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td><asp:TextBox ID="txtlname" runat="server" CssClass="validate[required]"/></td>
</tr>
<tr >
<td>Email:</td>
<td><asp:TextBox ID="txtemail" runat="server" CssClass="validate[required,custom[email]" />
</td>
</tr>
<tr >
<td>Url:</td>
<td><asp:TextBox ID="txtUrl" runat="server" CssClass="validate[required,custom[url]] text-input" />
</td>
</tr>
<tr>
<td valign="top">Address:</td>
<td>
<asp:TextBox ID="txtaddress" runat="server" TextMode="MultiLine" Rows="8" Columns="26"/></td>
</tr>
<tr>
<td>State:</td>
<td>
<asp:DropDownList ID="ddlState" runat="server" CssClass="validate[required] radio">
<asp:ListItem value="">Choose State</asp:ListItem>
<asp:ListItem Value="AL">Alabama</asp:ListItem>
<asp:ListItem value="AK">Alaska</asp:ListItem>
<asp:ListItem value="AL">Alabama </asp:ListItem>
<asp:ListItem value="AK">Alaska</asp:ListItem>
<asp:ListItem value="AZ">Arizona</asp:ListItem>
<asp:ListItem value="AR">Arkansas</asp:ListItem>
<asp:ListItem value="CA">California</asp:ListItem>
<asp:ListItem value="CO">Colorado</asp:ListItem>
<asp:ListItem value="CT">Connecticut</asp:ListItem>
<asp:ListItem value="DE">Delaware</asp:ListItem>
<asp:ListItem value="FL">Florida</asp:ListItem>
<asp:ListItem value="GA">Georgia</asp:ListItem>
<asp:ListItem value="HI">Hawaii</asp:ListItem>
<asp:ListItem value="ID">Idaho</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Zip:</td>
<td>
<asp:TextBox ID="txtZip" runat="server" CssClass="validate[required,custom[integer]] text-input"/>
</td>
</tr>
<tr>
<td> I Agree Conditions</td>
<td>
<input type="checkbox" id="agree" name="agree"/>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblResult" runat="server" Font-Bold="true"/>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>If you observe above code in header section I added some of script files and css files by using those files we have a chance to show popup messages when validation fails using JQuery in asp.net. Here one thing we need to remember that is if we want add validation for particular control then we need to add css class CssClass=”validate[required]” to that particular control.
Now add the following namespaces in code behind
using System;
using System.Drawing;After that add following codes in code behind
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblResult.Visible = true;
lblResult.Text = "Successfully Validated all the controls";
lblResult.ForeColor = Color.Green;
}After run your application and check the output.
JQuery form validations example in asp.net
No comments:
Post a Comment