title: .NET MVC unobtrusive validation / checkbox captcha
body: <p>I'm trying to implement a checkbox captcha I read about here:
  <a href="http://uxmovement.com/forms/captchas-vs-spambots-why-the-checkbox-captcha-wins/" rel="nofollow noreferrer">http://uxmovement.com/forms/captchas-vs-spambots-why-the-checkbox-captcha-wins/</a></p>
  
  <p>However I'm having issues adding the checkbox with client side javascript and unobtrusive validation. </p>
  
  <p>I implemented a checkbox with unobtrusive validation based on Darin Dimitrov's answer here: <a href="https://stackoverflow.com/questions/6923430/mvc-unobtrusive-validation-on-checkbox-not-working">MVC unobtrusive validation on checkbox not working</a> which works perfectly. </p>
  
  <p>However, once I remove the checkbox from my view and add it with this jquery code instead: </p>
  
  <pre><code>jQuery(document).ready(function (jQuery) {
      $('div.test').append($("&lt;input&gt;").attr("id", "AcceptsTerms")
                                       .attr("type", "checkbox")
                                       .val("true")
                                       .attr("name", "AcceptsTerms")
                                       .attr("data-val-required", "This field is required.")
                                       .attr("data-val-mustbetrue", "You must accept the terms and conditions")
                                       .attr("data-val", "true")
                                       .addClass("input-validation-error"));
  
      $('div.test').append($('&lt;input&gt;').attr("type", "hidden")
                                       .val("value", "false")
                                       .attr("name", "AcceptsTerms"));
  
      $('div.test').append($("&lt;label&gt;").attr("for", "AcceptsTerms")
                                       .html("Accept terms and conditions"));
  
      $('div.test').append($('&lt;span&gt;').addClass("field-validation-error")
                                      .attr("data-valmsg-replace", "true")
                                      .attr("data-valmsg-for", "AcceptsTerms"));
  });
  </code></pre>
  
  <p>it no longer wants to validate. Are there any known issues with adding form elements after the document has loaded and unobtrusive validation? If so, has any attempted to implement this or have any suggestions on how to go about this?</p>