Ok, I threw in the towel and decided to implement it myself. It turns out it
is supprisingly simple and I've included it below for anyone in the same
boat as I.
Any questions I'm willing to help, my real email address is:
r . w a g n e r (at) c r o s s l i n k . c o m . a u
Below is the ASP.NET page. It is a login page and the javascript checks the
username and password field have been filled in. it works in the following
way:
- Nothing happens until the submit button is clicked the first time. When
the button is clicked the gbVaidating variable is set to true
- The gbValidate() function does the validating. It checks each field. If
the field is invalid, it make a div visible. It does this by changing the
the display property of the style attribute. If the filed is valid, it hides
the div.
- Everytime a textbox is changed, the validation is re-run, but only has an
effect after the first submit. This means that after the first submit, the
error messages will appear, but will dissapear after a correct value has
been entered.
- In the code behind page, you will need to add some custom attributes so
the button and fields run the javascript
*** Code behind page ***
private void Page_Load(object sender, System.EventArgs e) {
.....
btnLogin.Attributes.Add("OnClick", "return gbStartValidation()");
txtUsername.Attributes.Add("OnChange", "gbValidate()");
txtPassword.Attributes.Add("OnChange", "gbValidate()");
.....
}
*** ASP.NET code ***
<%@ Register TagPrefix="uc1" TagName="Footer" Src="Template/Footer.ascx" %>
<%@ Register TagPrefix="cc1" Namespace="Consus.Web" Assembly="ConsusWeb" %>
<%@ Page language="c#" Codebehind="Login.aspx.cs" AutoEventWireup="false"
Inherits="Consus.Web.Login" %>
<%@ Register TagPrefix="uc1" TagName="HeaderNoCheck"
Src="Template/HeaderNoCheck.ascx" %>
<%@ Register TagPrefix="uc1" TagName="Header" Src="Template/Header.ascx" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Login</title>
<meta content="Microsoft Visual Studio 7.0" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="
http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
<script>
var gbValidating = false;
//
// Starts validation
// Validation should be started on the first click on the submit
//
function gbStartValidation() {
gbValidating = true;
return gbValidate();
}
//
// Validate the page if we have started validation
//
function gbValidate() {
var gbValid;
gbValid = true;
if(gbValidating) {
//
// Check username and password are filled in
//
if(document.Login.txtUsername.value.length == 0) {
document.getElementById("valUsername").style.display = "inline";
gbValid = false;
} else {
document.getElementById("valUsername").style.display = "none";
}
if(document.Login.txtPassword.value.length == 0) {
document.getElementById("valPassword").style.display = "inline";
gbValid = false;
} else {
document.getElementById("valPassword").style.display = "none";
}
}
return gbValid;
}
</script>
</HEAD>
<body>
<form id="Login" method="post" runat="server">
<uc1:headernocheck id="HeaderNoCheck1"
runat="server"></uc1:headernocheck>
<TABLE id="Table1" borderColor="#008f7c" cellSpacing="0"
borderColorDark="#004559" cellPadding="0" align="center" bgColor="#007bb5"
borderColorLight="#00d3b7" border="5">
<TBODY>
<tr>
<td>
<table>
</I></td>
</tr>
<TR>
<TD style="HEIGHT: 25px">
<P align="right"><FONT color="white" size="4">Username</FONT></P>
</TD>
<td style="HEIGHT: 25px" width="5"><FONT color="white"></FONT>
<TD style="HEIGHT: 25px"><FONT size="4"><asp:textbox id="txtUsername"
runat="server" Width="150px"></asp:textbox><FONT
color="white"></FONT></FONT></TD>
</TR>
<TR>
<TD style="HEIGHT: 5px">
<P align="right"><FONT color="white" size="4">Password</FONT></P>
</TD>
<td style="HEIGHT: 5px">
<TD style="HEIGHT: 5px"><asp:textbox id="txtPassword" runat="server"
Width="150px" TextMode="Password"></asp:textbox></TD>
</TR>
<TR>
<TD>
<td>
<TD>
<P align="right"><asp:button id="btnLogin" runat="server"
Text="Login"></asp:button></P>
</TD>
</TR>
<% //
// Show login failed if appropriate
//
if(gbLoginFailed) { %>
<tr>
<td colSpan="3"><FONT color="red"><STRONG>Invalid Username or
Password</STRONG></FONT>
</td>
</tr>
<% } %>
<tr>
<td colSpan="3">
<div id="valUsername" style="DISPLAY: none; COLOR: red">Please enter
a username</div>
</td>
</tr>
<tr>
<td colSpan="3">
<div id="valPassword" style="DISPLAY: none; COLOR: red">Please enter
a password</div>
</td>
</tr>
</TABLE>
</TD></TR></TBODY></TABLE><uc1:footer id="Footer1"
runat="server"></uc1:footer></form>
</body>
</HTML>
.