Client javascript tricks, eg,. accessing required validator rendered span tags

Following is the source of the page showing both versions

the more server side version is probably faster running, but because you have to embed delimiters in the javascript, it can be a little confusing
This also demonstrates use of stringbuilder, preferable for string concatenation. This could all be built into a control, as it populates a literal

The client side version works in the same way – same code, but needs <%= %> which is not such a good practice, best to avoid,

It is easier to debug this version, and once debugged could then be put into server side code.

Both code examples have special onload code to avoid problems with onload event getting lost or forgotten in complex aspx/ascx pages

this is the client side version:

<script type=”text/javascript”>
//<![CDATA[
function myInitFunction(){
    var ob1 = document.getElementById(“<%=RequiredFieldValidator1.ClientID.ToString() %>”);

    if (ob1) ob1.style.visibility=’visible’;
    var ob2 = document.getElementById(“<%=RequiredFieldValidator2.ClientID.ToString() %>”);

    if (ob2) ob2.style.visibility=’visible’;
    return (true);

}

    if ( typeof window.addEventListener != “undefined” )
        window.addEventListener( “load”, myInitFunction, false );
    else if ( typeof window.attachEvent != “undefined” ) {
         window.attachEvent( “onload”, myInitFunction );
}

else {

if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
        oldOnload( e );
        myInitFunction();
    };

}

else

window.onload = myInitFunction;

}

//]]>

</script>

<asp:Literal ID=”myCode” runat=”Server”></asp:Literal>

<div>

yadda 1

<asp:TextBox ID=”TextBox1″ runat=”server” CausesValidation=”True” ValidationGroup=”myValidationGroup”></asp:TextBox>

<asp:RequiredFieldValidator ID=”RequiredFieldValidator1″ runat=”server” ErrorMessage=”Please enter something for yadda 1″ ControlToValidate=”TextBox1″ ToolTip=”This is a mandatory field” ValidationGroup=”myValidationGroup”>*</asp:RequiredFieldValidator>

<br />

yadda 2

<asp:TextBox ID=”TextBox2″ runat=”server” CausesValidation=”True” ValidationGroup=”myValidationGroup”></asp:TextBox>

<asp:RequiredFieldValidator ID=”RequiredFieldValidator2″ runat=”server” ErrorMessage=”Please enter something for yadda 2″ ControlToValidate=”TextBox2″ ToolTip=”This is a mandatory field” ValidationGroup=”myValidationGroup”>*</asp:RequiredFieldValidator><br />

<asp:ValidationSummary ID=”ValidationSummary1″ runat=”server” HeaderText=”Error Summary” ToolTip=”Please correct the errors shown” ValidationGroup=”myValidationGroup” />

<asp:Button ID=”Button1″ runat=”server” Text=”Button” ValidationGroup=”myValidationGroup” OnClick=”Button1_Click” />

</div>

this is the server side version

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

StringBuilder codeText = new StringBuilder();

codeText.Append(“<script type=\”text/javascript\”>\n”);

codeText.Append(“//<![CDATA[\n”);

// client side code goes here

codeText.Append(“function myInitFunction(){\n”);

codeText.Append(” var ob1 = document.getElementById(\”” + this.RequiredFieldValidator1.ClientID.ToString() + “\”);\n”);

codeText.Append(” if (ob1) ob1.style.visibility=’visible’;\n”);

codeText.Append(” var ob2 = document.getElementById(\”” + this.RequiredFieldValidator2.ClientID.ToString() + “\”);\n”);

codeText.Append(” if (ob2) ob2.style.visibility=’visible’;\n”);

codeText.Append(” return (true);\n”);

codeText.Append(“}\n”);

// to decrease chances of client side javascript onload even getting lost,

// this code should ensure it is initialised and just once

codeText.Append(“if ( typeof window.addEventListener != \”undefined\” )\n”);

codeText.Append(” window.addEventListener( \”load\”, myInitFunction, false );\n”);

codeText.Append(“else if ( typeof window.attachEvent != \”undefined\” ) {\n”);

codeText.Append(” window.attachEvent( \”onload\”, myInitFunction );\n”);

codeText.Append(“}\n”);

codeText.Append(“else {\n”);

codeText.Append(” if ( window.onload != null ) {\n”);

codeText.Append(” var oldOnload = window.onload;\n”);

codeText.Append(” window.onload = function ( e ) {\n”);

codeText.Append(” oldOnload( e );\n”);

codeText.Append(” myInitFunction();\n”);

codeText.Append(” };\n”);

codeText.Append(” }\n”);

codeText.Append(” else \n”);

codeText.Append(” window.onload = myInitFunction;\n”);

codeText.Append(“}\n”);

// end of autload script block

codeText.Append(“//]]>\n”);

codeText.Append(“</script>\n”);

myCode.Text = codeText.ToString();

}

}

Note: these are just stubs of code, to demonstrate the idea.

PS. Goes without saying, it is best if you do not use this or do not need this sort of stuff
if it can be done nicely another way, but it can help use experience and make nicer feel

+ good thing it does not break any existing validation – allowing it to be safely reused as intended.

Advertisements