Can't cause client side validation within a composite control

Question

I have a custom composite control that contains a text box, some validators, as well as several UI components. I am unable to get the client side validation to work at all. The server side validation works fine after the postback. I was ultimately planning to add custom CSS to the TextBox on validation failure by hooking into the validation API, but I can't even get the client side validation running.

Since this control was intended to be generic, the validators are not generated from within the composite control itself but passed in from externally as follows.

    <mycontrol:HighlightedTextbox ID="HighlightedTextbox1" runat="server" Label="test" CssClass="generalText" FocusedCssClass="highlightText" ErrorCssClass="errorText">
      <validators>
        <asp:RequiredFieldValidator ID="required1" runat="server" ErrorMessage="Field is required" EnableClientScript="true" />
      </validators>
      <prompttemplate><span>this is a prompt</span></prompttemplate>
    </mycontrol:HighlightedTextbox>

I have the persistchildren attribute specified (I believe appropriately) so that the validators are in fact added to the Validators property. That appears to be working fine as well.

    [PersistChildren(true, true), ParseChildren(true), PersistenceMode(PersistenceMode.InnerProperty)]
    public abstract class BaseHighlightedControl<TControl> : CompositeControl
      where TControl : Control

I have a derived control that specifies a standard TextBox as TControl as well as exposing a text property but that is really all the derived type does. The composite control relies on the CreateChildControls method to build out the control and configure the validators. This seems like it should be an appropriate in the life-cycle since I have seen examples of composite controls that create validators in the CreateChildControls method.

    public List<BaseValidators> Validators { get; private set; }

    /// <summary>
    /// Create the child controls
    /// </summary>
    protected override void CreateChildControls()
    {
        base.CreateChildControls();
        this.MainControl.ID = "HighlightControl";

        this.PromptTemplate.InstantiateIn(this.Prompt);
        this.Prompt.Style.Add(HtmlTextWriterStyle.Display, "inline");
        this.FieldLabel.Text = this.Label;

        if (!this.DesignMode)
        {
            this.Controls.Add(this.FieldLabel);
            this.Controls.Add(this.MainControl);
            this.Controls.Add(this.Prompt);
            AddValidators();
        }
    }

    private void AddValidators()
    {
        foreach (var validator in this.Validators.OfType<BaseValidator>())
        {
            validator.ControlToValidate = this.MainControl.ID;
            validator.ValidationGroup = this.ValidationGroup;
            validator.Display = ValidatorDisplay.Dynamic;

            this.Controls.Add(validator);
        }
    }

Again, the server side validation takes place just fine. The Page_Validators collection in javascript doesn't ever contain my validators. Any validators that I add to the markup outside of my control appear in the javascript collection just fine and work appropriately.

What am I doing wrong?

Answer 1

The issue was caused by my attempt to create the validator controls inside asp.net markup and then pass them into the composite control later. For some reason that I don't quite understand, the validator control's life-cycle seemed to be a bit messed up even though they were never actually added to the control tree until the composite control put them there. The intent was that they would get created in markup and configured and loaded by the composite control. I simply used the template system instead of a control collection property. It isn't quite what I wanted since other controls can be added, but it works flawlessly since the controls are now instantiated in the CreateChildControls method. It now looks like this.

    public ITemplate Validators { get; set; }

instead of

    public List<BaseValidators> Validators { get; private set; }

The CreateChildControls method now does standard template instantiation

    this.ValidatorsTemplate.InstantiateIn(this.ValidatorContainer);

I then recursively walk the ValidatorContainer controls (careful to avoid infinite recursion) looking for validators which I configure by setting the ControlToValidate and some other things.