I have created a user control that has some custom client side validation. I am embedding the Javascript via RegisterStartupScript, and passing information to the validation via RegisterExpandoAttribute. However, the user control is not visible on PageLoad
and when I use document.getElementById, I get null values.
Here is my current code:
public void Page_Load(object sender, EventArgs e)
{
ClientScriptManager cs = Page.ClientScript;
Type cstype = this.GetType();
if (!cs.IsStartupScriptRegistered(cstype, "ValidatorType"))
{
String DateValidator;
DateValidator = "<script type=\"text/javascript\">\n";
DateValidator += "function ValidateDate(source, args) {\n";
DateValidator += " var ddDay = document.getElementById(source.day);\n";
DateValidator += " var day = ddDay.selectedIndex;\n";
DateValidator += " var ddMonth = document.getElementById(source.month);\n";
DateValidator += " var month = ddMonth.selectedIndex;\n";
DateValidator += " var ddYear = document.getElementById(source.year);\n";
DateValidator += " var year = ddYear.selectedIndex;\n";
DateValidator += " if (day == 0 || month == 0 || year == 0)\n";
DateValidator += " args.IsValid = false;\n";
DateValidator += " else\n";
DateValidator += " args.IsValid = true;\n";
DateValidator += " }\n";
DateValidator += "</script>";
cs.RegisterStartupScript(cstype, "ValidatorType", DateValidator);
}
cs.RegisterExpandoAttribute(reqDueDate.ClientID, "month", ddMonth.ClientID);
cs.RegisterExpandoAttribute(reqDueDate.ClientID, "day", ddDay.ClientID, false);
cs.RegisterExpandoAttribute(reqDueDate.ClientID, "year", ddYear.ClientID, false);
}
The errors that I receive are:
Uncaught TypeError: Cannot set property 'month' of null
Uncaught TypeError: Cannot read property 'selectedIndex' of null
The only issue that arises from this is that I use them often in a Placeholder to hide multiple controls and their resepective labels. It's the placeholders that I use the Visible property on.
The only issue that arises from this is that I use them often in a Placeholder to hide multiple controls and their resepective labels. It's the placeholders that I use the Visible property on.
Nothing to worry if you setting property of PlaceHolder.
You can remove Visible property from Placeholder and add style="display:none;"
It will work fine for you.
Kindly mark reply as answer which helps you.
Thanks
Please Mark as Answer if find helpful -- Nasser -- Skype: maleknasser1
It seems that there is still something wrong with my validation. source.day is showing as undefined. It seems that my javascript is rendering fine, but none of my source.### variables are being defined.
The javascript that's being rendered is as follows:
Alright... so I'm not sure what's going on, but it seems that whenever I have any action that updates the UpdatePanel, which my user control is part of, the validation fails. I have a dropdown that, depending on the value selected, enables some other options
(which are unrelated to the user control in question). If I fire the validation before I change this option, my custom validation works fine. If I change the option (which does an AutoPostBack in an UpdatePanel), my validation becomes invalid.
If I fire the validation before I change this option, my custom validation works fine. If I change the option (which does an AutoPostBack in an UpdatePanel), my validation becomes invalid.
According to the description above, the validation becomes invalid when do a postback. In order to resolve your issue, could you debug your code step by step and try to find out whether there are some differences after a postback? That will help you out.
Best wishes,
Please mark the replies as answers if they help or unmark if not.
Feedback to us
The problem happens in my ValidateDate function (javascript). Before a postback, source.day gets the value correctly. After the postback, source.day becomes null.
NorfolkDevel...
Member
18 Points
10 Posts
Client Side Validation of a User Control that is not Visible on Page Load
Jul 03, 2012 03:54 PM|LINK
I have created a user control that has some custom client side validation. I am embedding the Javascript via RegisterStartupScript, and passing information to the validation via RegisterExpandoAttribute. However, the user control is not visible on PageLoad and when I use document.getElementById, I get null values.
Here is my current code:
public void Page_Load(object sender, EventArgs e) { ClientScriptManager cs = Page.ClientScript; Type cstype = this.GetType(); if (!cs.IsStartupScriptRegistered(cstype, "ValidatorType")) { String DateValidator; DateValidator = "<script type=\"text/javascript\">\n"; DateValidator += "function ValidateDate(source, args) {\n"; DateValidator += " var ddDay = document.getElementById(source.day);\n"; DateValidator += " var day = ddDay.selectedIndex;\n"; DateValidator += " var ddMonth = document.getElementById(source.month);\n"; DateValidator += " var month = ddMonth.selectedIndex;\n"; DateValidator += " var ddYear = document.getElementById(source.year);\n"; DateValidator += " var year = ddYear.selectedIndex;\n"; DateValidator += " if (day == 0 || month == 0 || year == 0)\n"; DateValidator += " args.IsValid = false;\n"; DateValidator += " else\n"; DateValidator += " args.IsValid = true;\n"; DateValidator += " }\n"; DateValidator += "</script>"; cs.RegisterStartupScript(cstype, "ValidatorType", DateValidator); } cs.RegisterExpandoAttribute(reqDueDate.ClientID, "month", ddMonth.ClientID); cs.RegisterExpandoAttribute(reqDueDate.ClientID, "day", ddDay.ClientID, false); cs.RegisterExpandoAttribute(reqDueDate.ClientID, "year", ddYear.ClientID, false); }The errors that I receive are:
Nasser Malik
Star
11584 Points
1778 Posts
Re: Client Side Validation of a User Control that is not Visible on Page Load
Jul 03, 2012 04:22 PM|LINK
Instead of using Visible="false"
Use style="display: none;"
Your problem will be solved.
Actually when you set Visible false then nothing render on page so you get javascript error.
In display:none case your control is render but hidden and javascript works fine.
Skype: maleknasser1
NorfolkDevel...
Member
18 Points
10 Posts
Re: Client Side Validation of a User Control that is not Visible on Page Load
Jul 03, 2012 04:33 PM|LINK
The only issue that arises from this is that I use them often in a Placeholder to hide multiple controls and their resepective labels. It's the placeholders that I use the Visible property on.
ramanselva
Contributor
2064 Points
324 Posts
Re: Client Side Validation of a User Control that is not Visible on Page Load
Jul 03, 2012 04:54 PM|LINK
Hi,
try to add the custom attributes in AddAttributesToRender method.
Please have a look
http://haacked.com/archive/2006/11/26/Adding_ClientSide_Custom_Properties_To_Controls.aspx
This can be beneficial to other community members reading the thread.
Regards,
Rama Selvam M.
Nasser Malik
Star
11584 Points
1778 Posts
Re: Client Side Validation of a User Control that is not Visible on Page Load
Jul 03, 2012 05:18 PM|LINK
Nothing to worry if you setting property of PlaceHolder.
You can remove Visible property from Placeholder and add style="display:none;"
It will work fine for you.
Kindly mark reply as answer which helps you.
Thanks
Skype: maleknasser1
NorfolkDevel...
Member
18 Points
10 Posts
Re: Client Side Validation of a User Control that is not Visible on Page Load
Jul 04, 2012 01:11 PM|LINK
It seems that there is still something wrong with my validation. source.day is showing as undefined. It seems that my javascript is rendering fine, but none of my source.### variables are being defined.
The javascript that's being rendered is as follows:
And if I throw an alert(source.id) in my validation, it returns Main_ddStartAiringDate_reqDueDate.
However, source.month returns undefined. What am I missing?
NorfolkDevel...
Member
18 Points
10 Posts
Re: Client Side Validation of a User Control that is not Visible on Page Load
Jul 04, 2012 03:18 PM|LINK
Alright... so I'm not sure what's going on, but it seems that whenever I have any action that updates the UpdatePanel, which my user control is part of, the validation fails. I have a dropdown that, depending on the value selected, enables some other options (which are unrelated to the user control in question). If I fire the validation before I change this option, my custom validation works fine. If I change the option (which does an AutoPostBack in an UpdatePanel), my validation becomes invalid.
Again, here is my user control:
<asp:DropDownList ID="ddMonth" runat="server" AppendDataBoundItems="true"> <asp:ListItem Value="">--Month--</asp:ListItem> </asp:DropDownList> <asp:DropDownList ID="ddDay" runat="server" AppendDataBoundItems="true"> <asp:ListItem Value="">--Day--</asp:ListItem> </asp:DropDownList> <asp:DropDownList ID="ddYear" runat="server" AppendDataBoundItems="true"> <asp:ListItem Value="">--Year--</asp:ListItem> </asp:DropDownList> <asp:CustomValidator ID="reqDueDate" EnableClientScript="true" ClientValidationFunction="ValidateDate" runat="server" ErrorMessage="Required" CssClass="input-notification error png_bg" Display="Dynamic"></asp:CustomValidator>And here is my custom validation of the user control:
protected void Page_Load(object sender, EventArgs e) { Type cstype = this.GetType(); if (!Page.ClientScript.IsStartupScriptRegistered(cstype, "ValidatorType")) { String DateValidator; DateValidator = "<script type=\"text/javascript\">\n"; DateValidator += "function ValidateDate(source, args) {\n"; DateValidator += " var ddDay = document.getElementById(source.day);\n"; DateValidator += " var day = ddDay.selectedIndex;"; DateValidator += " var ddMonth = document.getElementById(source.month);\n"; DateValidator += " var month = ddMonth.selectedIndex;\n"; DateValidator += " var ddYear = document.getElementById(source.year);\n"; DateValidator += " var year = ddYear.selectedIndex;\n"; DateValidator += " if (day == 0 || month == 0 || year == 0)\n"; DateValidator += " args.IsValid = false;\n"; DateValidator += " else\n"; DateValidator += " args.IsValid = true;\n"; DateValidator += " }\n"; DateValidator += "</script>"; Page.ClientScript.RegisterStartupScript(cstype, "ValidatorType", DateValidator); } Page.ClientScript.RegisterExpandoAttribute(reqDueDate.ClientID, "month", ddMonth.ClientID); Page.ClientScript.RegisterExpandoAttribute(reqDueDate.ClientID, "day", ddDay.ClientID); Page.ClientScript.RegisterExpandoAttribute(reqDueDate.ClientID, "year", ddYear.ClientID); }Catherine Sh...
All-Star
23382 Points
2490 Posts
Microsoft
Re: Client Side Validation of a User Control that is not Visible on Page Load
Jul 05, 2012 02:08 AM|LINK
Hi NorfolkDeveloper,
According to the description above, the validation becomes invalid when do a postback. In order to resolve your issue, could you debug your code step by step and try to find out whether there are some differences after a postback? That will help you out.
Best wishes,
Feedback to us
Develop and promote your apps in Windows Store
NorfolkDevel...
Member
18 Points
10 Posts
Re: Client Side Validation of a User Control that is not Visible on Page Load
Jul 05, 2012 12:36 PM|LINK
The problem happens in my ValidateDate function (javascript). Before a postback, source.day gets the value correctly. After the postback, source.day becomes null.