Prevent controls on the ASP.Net Masterpage from fireing the validation on the contentpages.
Hi
I'm very new to jquery and have run into a problem which I've been struggling for a while now. Problem is I have a master page with a few "navigate" to offsite pages. User is currently on a content page with some validation enabled using jQuery 1.4.2 validation plugin. Now once the user click on the master page control (imagebutton, or input html control) validation fires on the contentpage and prevent the user to navigate to the "offsite" url.
How do I disable validation for a content page if a master page html input control was clicked?
here is some code to help:
This is Shell.Master
- <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Shell.master.cs" Inherits="JQueryTest.Shell" %>
<!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">
<title></title>
<script src="javascript/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script src="javascript/jquery/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
</head>
<body>
<form id="frmMaster" runat="server">
<asp:ImageButton ID="imgBtnProblemCauser" runat="server" ValidationGroup="NOVALIDATION" PostBackUrl="http://www.jquery.com" ToolTip="Should not cause validation in contentpages" ImageUrl="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" />
<div>
<table cellpadding="0" cellspacing="0" border="0" width="660px">
<tr>
<td style="height: 10px; font-size: 8px;">
</td>
</tr>
<tr>
<td width="660px">
<!-- main content area --->
<asp:ContentPlaceHolder runat="server" ID="maincontent" EnableViewState="true" />
<!-- main content area --->
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
This is the content page.
Notice the validation on the 2 textboxes. I only want validation to fire when the user clicks the submit on the content page.
- <%@ Page Title="MyLoginPage" Language="C#" MasterPageFile="~/Shell.Master" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="JQueryTest.Default" %>
<asp:Content ID="cntUserLogin" ContentPlaceHolderID="maincontent" runat="server">
<script src="javascript/jquery/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// validate the login form when submitted
$("#aspnetForm").validate(
{
rules: {
<%=txtUserName.UniqueID %>: "required",
<%=txtPassword.UniqueID %>: "required"
},
messages:
{
<%=txtUserName.UniqueID %>: "Username is required.",
<%=txtPassword.UniqueID %>: "Password is required."
}
});
});
</script>
<div align="center">
<table cellspacing="0" cellpadding="1" border="0" style="border-collapse: collapse;">
<tr>
<td>
<table cellpadding="0" border="0">
<tr>
<td class="field" align="center" valign="middle" colspan="2" style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 14px; font-weight: bold;">
Log in
</td>
</tr>
<tr>
<td class="field" align="left" valign="middle" style="color: Black; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-weight: bold; width: 100px;">
User Name:
</td>
<td>
<asp:TextBox ID="txtUserName" runat="server" CssClass="std" MaxLength="50" />
</td>
</tr>
<tr>
<td class="field" align="left" valign="middle" style="color: Black; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 11px; font-weight: bold; width: 100px;">
Password:
</td>
<td>
<asp:TextBox ID="txtPassword" runat="server" CssClass="std" MaxLength="50" TextMode="Password" />
</td>
</tr>
<tr>
<td>
</td>
<td align="right">
<asp:Button ID="btnAuthenticate" runat="server" Text="Submit" OnClick="btnAuthenticate_Click" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td align="center">
<asp:Label ID="lblLabel" runat="server" CssClass="error" Visible="false"></asp:Label>
</td>
</tr>
</table>
</div>
</asp:Content>
Please help. I'm really stuck and only know how to do the default validation on single pages as per the tutorials.