In this post I will show you how to validate asp.net form using jqery. Create a new website,add a new js file ,and add following code inside it
function validateForm(e) {
var formIsValid = true;
// check that a valid email address has been entered
var emailRegExp = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/;
if (!emailRegExp.test(String($("#txtEmail").val()).toUpperCase())) {
addError("txtEmail", "Please enter a valid email address.");
formIsValid = false;
} else {
removeError("txtEmail");
}
// check that first name has one or more characters
if ($("#txtFirstName").val() == '') {
addError("txtFirstName", "This field is required.");
formIsValid = false;
} else {
removeError("txtFirstName");
}
// check that last name has one or more characters
if ($("#txtLastName").val() == '') {
addError("txtLastName", "This field is required.");
formIsValid = false;
} else {
removeError("txtLastName");
}
// check that a valid phone number is entered
var phoneRegExp = /^\(?[1-9]\d{2}\)?\s?\-?\.?\d{3}\s?\-?\.?\d{4}$/;
if (!phoneRegExp.test($("#txtPhone").val())) {
addError("txtPhone", "Valid phone number required.");
formIsValid = false;
} else {
removeError("txtPhone");
}
if (!formIsValid) {
e.preventDefault();
}
}
function addError(id, msg) {
if ($("#" + id).parent().find("label[class=error]").attr("generated") == "true") {
$("#" + id).parent().find("label[class=error]").css("display", "block");
} else {
$("#" + id).parent().append('<label for="' + id + '" generated="true" class="error">' + msg + '</label>').css("display", "block");
}
}
function removeError(id) {
$("#" + id).parent().find("label[class=error]").css("display", "none");
}
Add a new page.Then add reference of jquery and above js file<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" 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 runat="server">
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Scripts/Validation.js"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
$(".submitForm").click(function (e) {
validateForm(e);
});
});
</script>
<style type="text/css">
.error{color:Red;}
</style>
</head>
<body>
<form id="form1" runat="server">
<table class="style1">
<tr>
<td>
FirstName
</td>
<td>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
LastName
</td>
<td>
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Phone Number
</td>
<td>
<asp:TextBox ID="txtPhone" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<div>
<input type="button" id="btnSubmit" class="submitForm" value="Submit" />
</div>
</form>
</body>
</html>
Saturday, October 1, 2011
How to sum the value of gridview column using jquery
In this post I will show how to sum the value of gridview column on selection of checkbox .Let us suppose that you have a gridview which has three column named Name,Quantity and Price.Now your requirement is to sum the value of price filed on selection of checkbox.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" 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 runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(function () {
var total;
//Column index value of price field (Column index start from 1)
var columnIndexValue = 4;
var checked = $('input:checkbox').click(function (e) {
var total = 0.0;
$("tr:has(:checkbox:checked) td:nth-child(" + columnIndexValue + ")").each(function () {
total += parseFloat($(this).text());
});
$('#Sum').text("your total is:" + total.toFixed(2));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdItems" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkItem" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="label2" Text='<%#Eval("Name") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:Label ID="Label1" Text='<%#Eval("Quantity") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Price">
<ItemTemplate>
<asp:Label ID="Label2" Text='<%#Eval("Price") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="Sum">
</div>
</form>
</body>
</html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Default2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { grdItems.DataSource = new Item().Items; grdItems.DataBind(); } } public class Item { public string Name { get; set; } public int Quantity { get; set; } public decimal Price { get; set; } public List<Item> Items { get { return new List<Item>() { new Item(){Name = "Item01",Quantity = 10,Price = 180M}, new Item(){Name = "Item01",Quantity = 11,Price = 184M}, new Item(){Name = "Item01",Quantity = 12,Price = 190M}, new Item(){Name = "Item01",Quantity = 13,Price = 110M}, }; } } }
Labels:
ASP.Net
,
Javascript
,
JQuery
,
Web Programming
Previous Article
Responses
0 Respones to "How to validate asp.net form using Jquery"
Post a Comment