You could add both textbox control and validator control in each item and set the 'Visible'
property to "false" so that they won't be rendered on the page and not be working as well.
When you select the "Grade2" option, then you could do a post back to render both controls and do validation. You might need to use
'NamingContrainer' property to retrieve the repeater item and hence to get all controls in the same item.
// Simulation of the data
private static DataTable _repeaterDT;
public static DataTable RepeaterDT
{
get
{
if (_repeaterDT is null)
{
_repeaterDT = new DataTable();
_repeaterDT.Columns.Add("Id", typeof(int));
_repeaterDT.Rows.Add(1);
_repeaterDT.Rows.Add(2);
_repeaterDT.Rows.Add(3);
}
return _repeaterDT;
}
set
{
_repeaterDT = value;
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Repeater1.DataSource = RepeaterDT;
Repeater1.DataBind();
}
}
protected void SubmitBtn_Click(object sender, EventArgs e)
{
Label1.Text = "Submit Successfully!";
}
protected void RadioBtnList_SelectedIndexChanged(object sender, EventArgs e)
{
//Retrieve related controls in the same item
RadioButtonList list = (RadioButtonList)sender;
RepeaterItem item = (RepeaterItem)list.NamingContainer;
TextBox textBox = (TextBox)item.FindControl("TextForGrade2");
RequiredFieldValidator validator = (RequiredFieldValidator)item.FindControl("RequiredValidator1");
if (list.SelectedItem.Text == "Grade2")
{
textBox.Visible = true;
validator.Visible = true;
}
else
{
textBox.Visible = false;
validator.Visible = false;
}
}
Demo:
Hope helps.
Best regards,
Sean
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
As you mentioned that you have used RadioButtonList which is a server control in webforms framework, I suggest that you don't do that from javascript side for few disadvantages:
You will lose many advantages from webforms server controls (e.g. RadioButtonList).
You will need to write a lot of javascript codes to achieve a robust validator for your requirement.
If you insist on writing javascript function, below are some tips:
Client ID: the client id could be used when you want to retrieve the control from rendered page (html). For example, RadioButtonList (ID, 'radio1'), Repeater (ID, 'Repeater1'), default rendered client id will be like "Repeater1_radio1_0".
Another approach would be using static client id, which will keep the client id the same as server side.
Validator (actually <span> html element) + javascript function (integrated in webforms framework): You will need to check js files in
'/Scripts/WebForms/WebForms.js' and '/Scripts/WebForms/WebUIValidation.js' to modify lots of functions which are built-in functions for webforms framework.
To summarize, it is very difficult to do above from javascript side as it is not the purpose of using webforms. PostBack is one of the most important and useful features to make the client side able to communicate with the server side.
Best regards,
Sean
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
91 Points
1205 Posts
enable the required field validator when the text box is empty and visible inside a repeater
Nov 12, 2020 08:50 PM|nicklibee|LINK
Dears
I have a repeater and on the repeater I have a radio button list.
At the bottom of the page, I have a submit button which enable user to submit the details.
Radio button list has values Grade1, Grade2,Grade3 and Grade4.
On click of Grade2, I am displaying a text box inside the repeater for the user to provide comments.
If user don't provide any comments and on click of submit button, I want to display a message using required field validator inside the repeater.
How can I achieve it?
Thanks
Nick.
Member
91 Points
1205 Posts
Re: enable the required field validator when the text box is empty and visible inside a repeater
Nov 12, 2020 10:11 PM|nicklibee|LINK
dears,
can anyone here please help me?
thanks
Contributor
2880 Points
846 Posts
Re: enable the required field validator when the text box is empty and visible inside a repeater
Nov 13, 2020 03:40 AM|Sean Fang|LINK
Hi nicklibee,
You could add both textbox control and validator control in each item and set the 'Visible' property to "false" so that they won't be rendered on the page and not be working as well.
When you select the "Grade2" option, then you could do a post back to render both controls and do validation. You might need to use 'NamingContrainer' property to retrieve the repeater item and hence to get all controls in the same item.
More details, you could refer to below codes.
aspx:
<form id="form1" runat="server"> <div> <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <h3>Validator for text in Repeater:</h3> </HeaderTemplate> <ItemTemplate> <div> <asp:RadioButtonList ID="RadioBtnList" runat="server" OnSelectedIndexChanged="RadioBtnList_SelectedIndexChanged" AutoPostBack="true"> <asp:ListItem Text="Grade1" Value="1"></asp:ListItem> <asp:ListItem Text="Grade2" Value="2"></asp:ListItem> <asp:ListItem Text="Grade3" Value="3"></asp:ListItem> <asp:ListItem Text="Grade4" Value="4"></asp:ListItem> </asp:RadioButtonList> <asp:TextBox ID="TextForGrade2" runat="server" Visible="false"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredValidator1" runat="server" ControlToValidate="TextForGrade2" ErrorMessage="Text Cannot be empty!" Visible="false"></asp:RequiredFieldValidator> </div> </ItemTemplate> <SeparatorTemplate> ======================================================================================================== </SeparatorTemplate> </asp:Repeater> </div> <asp:Button ID="SubmitBtn" runat="server" Text="Submit" OnClick="SubmitBtn_Click" /> <asp:Label ID="Label1" runat="server"></asp:Label> </form>Code behind:
// Simulation of the data private static DataTable _repeaterDT; public static DataTable RepeaterDT { get { if (_repeaterDT is null) { _repeaterDT = new DataTable(); _repeaterDT.Columns.Add("Id", typeof(int)); _repeaterDT.Rows.Add(1); _repeaterDT.Rows.Add(2); _repeaterDT.Rows.Add(3); } return _repeaterDT; } set { _repeaterDT = value; } } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { Repeater1.DataSource = RepeaterDT; Repeater1.DataBind(); } } protected void SubmitBtn_Click(object sender, EventArgs e) { Label1.Text = "Submit Successfully!"; } protected void RadioBtnList_SelectedIndexChanged(object sender, EventArgs e) { //Retrieve related controls in the same item RadioButtonList list = (RadioButtonList)sender; RepeaterItem item = (RepeaterItem)list.NamingContainer; TextBox textBox = (TextBox)item.FindControl("TextForGrade2"); RequiredFieldValidator validator = (RequiredFieldValidator)item.FindControl("RequiredValidator1"); if (list.SelectedItem.Text == "Grade2") { textBox.Visible = true; validator.Visible = true; } else { textBox.Visible = false; validator.Visible = false; } }Demo:
Hope helps.
Best regards,
Sean
Member
91 Points
1205 Posts
Re: enable the required field validator when the text box is empty and visible inside a repeater
Nov 13, 2020 03:48 AM|nicklibee|LINK
thanks sean.
is it possible to do the above using javascript. don't want to go to the server every now and then. using the required field validator is it possible?
Member
91 Points
1205 Posts
Re: enable the required field validator when the text box is empty and visible inside a repeater
Nov 13, 2020 06:42 AM|nicklibee|LINK
is it possible using javascript or jquery??
Contributor
2880 Points
846 Posts
Re: enable the required field validator when the text box is empty and visible inside a repeater
Nov 13, 2020 07:25 AM|Sean Fang|LINK
Hi nicklibee,
As you mentioned that you have used RadioButtonList which is a server control in webforms framework, I suggest that you don't do that from javascript side for few disadvantages:
If you insist on writing javascript function, below are some tips:
To summarize, it is very difficult to do above from javascript side as it is not the purpose of using webforms. PostBack is one of the most important and useful features to make the client side able to communicate with the server side.
Best regards,
Sean