title: How to client side validate a custom control?
body: <p>Following up on my <a href="https://stackoverflow.com/questions/10521211/how-to-make-a-custom-control-validatable">previous question</a> about a custom control and validation I now have server side validation working but can't seem to figure out how to add the client side validation. I have to following control:</p>
  
  <pre><code>[ValidationProperty("Text")]
  [ToolboxData("&lt;{0}:DateSelect runat=server&gt;&lt;/{0}:DateSelect&gt;")]
  public class DateSelect : System.Web.UI.WebControls.Panel
  {
   private DropDownList day;
   private DropDownList month;
   private DropDownList year;
  
   public DateSelect()
   {
      day = new DropDownList();
      /* some code to create items for 'day' here */
      Controls.Add(day);
      month = new DropDownList();
      /* some code to create items for 'month' here */
      Controls.Add(month);
      year = new DropDownList();
      /* some code to create items for 'year' here */
      Controls.Add(year);
   }
  
  
   public string Text
   {
      get
      {
          return year.Text + "-" + month.Text + "-" + day.Text;
      }
   }
  }
  </code></pre>
  
  <p>On my webform I add this Control, add a CompareValidator in DataType operation to check against valid dates. I set the validator's <code>EnableClientScript</code> to <code>false</code> and the custom control is validated well on server side and provides the correct messages at the correct cases. However, as soon as I turn <code>EnableClientScript</code> to <code>true</code> the custom control is validated client side and produces an error message when there is in fact a valid date in the DropDownLists. I've been trying to figure out why and ended up at the following javascript generated by .net which I think never will come up with resulting in the correct value:</p>
  
  <pre><code>function ValidatorGetValueRecursive(control)
  {
      if (typeof(control.value) == "string" &amp;&amp; (control.type != "radio" || control.checked == true)) {
          return control.value;
      }
      var i, val;
      for (i = 0; i&lt;control.childNodes.length; i++) {
          val = ValidatorGetValueRecursive(control.childNodes[i]);
          if (val != "") return val;
      }
      return "";
  }
  </code></pre>
  
  <p>So I believe I have to add something to my custom control, perhaps a piece of javascript, that gets called as soon as the validator tries to validate my control and produces the correct value to validate against from the selected items of the three DropDownLists. I just have no clue where to add this script. Any pointers?</p>