title: jQuery unobtrusive validation on composite html control
body: <p>I have the following control that represents Time:</p>
  
  <pre><code>&lt;div id="xxx"&gt;
     &lt;input type="text" name="xxx.hour"/&gt;
     &lt;input type="text" name="xxx.minute"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Because I want to add validation, I added:</p>
  
  <pre><code>&lt;div id="xxx" data-val="true" data-val-time="Time no valid"&gt;
     &lt;input type="text" name="xxx.hour"/&gt;
     &lt;input type="text" name="xxx.minute"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I added the adapter and method:</p>
  
  <pre><code>$.validator.addMethod("time_method", function (val, el, params) {
  
      var elementId = $(el).attr('id');
      alert('id ' + elementId);
      var hour= $(el).children('input[name$=.hour]').val();
      var minute= $(el).children('input[name$=.minute]').val();
  
      return hour&gt;= 0 &amp;&amp; hour&lt;24 &amp;&amp; minute&gt;=0 &amp;&amp; minute&lt;23;
  });
  
  $.validator.unobtrusive.adapters.add("time", {},
  function (options) {
      options.rules["time_method"] = true;
      options.messages["time_method"] = options.message;
  });
  </code></pre>
  
  <p>But the method "time_method" is never executed, I guess because jquery.validate only applies on input tags, am I right?</p>
  
  <p>What would be the best way to do it?</p>
  
  <p><strong>UPDATE:</strong> I know it could be done in several ways, I'm just interested in the possibility of do it this way. I have simplify the problem to show a very small and silly example of what I'm trying to achieve.</p>