title: Add Validation Rules Dynamically to MVC3
body: <p>All,</p>
  
  <p>I need to add validation rules to dynamic form input text elements added by the user. </p>
  
  <p>I am accomplishing this by cloning a chunk of HTML, providing unique ids and adding to the DOM</p>
  
  <p>I researched the syntax for this, which I believe is correct yet I am getting the following JS error when I try to access the <em>.rules</em> method:</p>
  
  <pre><code>TypeError: $(...).rules is not a function
  </code></pre>
  
  <p><strong>Caused by this:</strong></p>
  
  <pre><code>$("input[type=text].validateRequired").each(function () {
  
       $(this).rules("add", { required: true, messages: { required: "Data is missing" }   
  
     });     
   });
  </code></pre>
  
  <p>When I examine <code>$(this)</code> in FireBug, I do not see a .rules method yet it exists in the validation scripts and all of the documentation shows that the method should be available globally. Not sure how to get it in scope.</p>
  
  <p>Here are the code pieces in the View related to this problem:</p>
  
  <p><strong>JS Includes</strong></p>
  
  <pre><code>    &lt;script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>JS Method that creates the dynamic form elements</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
  
          var uniqueId = 1;
          var ctr = 1;
          $(function() {
              $('.js-add-cosponsor-hyperlink').click(function() {
  
                  var copy = $("#cosponsorsTemplate").clone(true).appendTo("#addCosponsorSection").hide().fadeIn('slow');
                  var cosponsorDivId = 'cosponsors_' + uniqueId;
                  var copyText = copy.html();
  
                  copyText = copyText.replace(/Guitar1/g, 'Guitar' + ctr);
                  copyText = copyText.replace('Guitar_1', 'Guitar_' + ctr);
                  copy.html(copyText);
                  $('#cosponsorsTemplate').attr('id', cosponsorDivId);
  
  
  
                  var deleteLink = copy.find("a.icon.delete");
                  deleteLink.on('click', function() {
                      copy.fadeOut(300, function() { $(this).remove(); }); //fade out the removal
  
                  });
  
  
                  $.validator.unobtrusive.parse(form);
                  $("input[type=text].validateRequired").each(function () {
  
                      var t = $(this);
                      $(this).rules("add", { required: true, messages: { required: "Data is missing" } });
                  });
  
                  uniqueId++;
                  ctr++;
              });
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>*<strong><em>The Form</em>*</strong></p>
  
  <pre><code>    @using (Html.BeginForm())
      {
        [...]
  
  
         &lt;!-- Template used to do the Clone: These need dynamic validation --&gt;
  
         &lt;div style="display:none"&gt;
           &lt;div id="cosponsorsTemplate"&gt;
                  &lt;div class="formColumn1"&gt;&lt;label&gt;Guitar&lt;/label&gt;&lt;/div&gt;
               &lt;div class="formColumn2"&gt;@Html.TextBoxFor(model =&gt; model.Guitar1.Make, new { Placeholder = "Make", Class = "validateRequired" })
                 &lt;div class="messageBottom"&gt; 
                             @Html.ValidationMessageFor(model =&gt; model.Guitar1.Make)
                  &lt;/div&gt;
               &lt;/div&gt;
                  &lt;div class="formColumn3"&gt;@Html.TextBoxFor(model =&gt; model.Guitar1.Model, new { Placeholder = "Model" , Class = "validateRequired"})
                      &lt;div class="messageBottom"&gt; 
                          @Html.ValidationMessageFor(model =&gt; model.Guitar1.Model)
                      &lt;/div&gt;
                  &lt;/div&gt;
                   &lt;div class="formColumn4"&gt;@Html.TextBoxFor(model =&gt; model.Guitar1.ProductionYear, new { Placeholder = "Production Year", Class = "validateRequired" })
                               &lt;div class="messageBottom"&gt; 
                                   @Html.ValidationMessageFor(model =&gt; model.Guitar1.ProductionYear)
                               &lt;/div&gt;&lt;a class="icon delete"&gt;Delete&lt;/a&gt;
                            &lt;/div&gt;
  
            &lt;/div&gt;
      &lt;/div&gt;    
      &lt;!-- End Add Co-Sponsor Row Template --&gt;
      }
  </code></pre>