enable the required field validator when the text box is empty and visible inside a repeater

Question

User1897897189 posted

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.

Answer 1

User1897897189 posted

dears,

can anyone here please help me?

thanks

Answer 2

User-1330468790 posted

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

Answer 3

User1897897189 posted

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?

Answer 4

User1897897189 posted

is it possible using javascript or jquery??

Answer 5

User-1330468790 posted

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:

• 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