title: How can I get typeahead.js to play nicely with jquery.validate?
body: <p>I have an ASP.NET MVC 5 website that uses jQuery validation (<code>jquery.validate.js</code> in the MVC project template). I'm trying to use <code>typeahead.js</code> to implement type-ahead functionality on one of the input fields in a form. (The form happens to be inside a bootstrap modal).</p>
  
  <p>Because submitting the form will make an AJAX request, the form submit event is trapped like so:</p>
  
  <pre><code>$form.on("submit", function (e) {
  
      if (!$form.valid()) {
          return false;
      }
  
      ... do stuff ...
  </code></pre>
  
  <p>Note that the first thing that happens here is that the form is checked for any validation errors, as detected by the jQuery validation library.</p>
  
  <p>If I <strong>don't</strong> use <code>typeahead</code>, then everything is fine. I can enter values into my form and submit it, and all is well.</p>
  
  <p>However, as soon as I do the following to add type-ahead functionality to my input:</p>
  
  <pre><code>$("#myInput").typeahead({
      minLength: 1,
      highlight: true
  },
  {
      source: mySource
  });
  </code></pre>
  
  <p>...then I can no longer submit the form. My form is considered to be <em>not</em> valid: <code>$form.valid()</code> returns <code>false</code>.</p>
  
  <p>I think the <code>typeahead.js</code> library is adding some extra elements (including a hidden input) to the form, and this is confusing the <code>jquery.validate.js</code> library.</p>
  
  <p>Using Chrome F12, it seems there's an input there that looks like a copy of the original input, and sadly that copy appears to have been duplicated such that it also has copies of all the jQuery-validation attributes.</p>
  
  <p>How can I work around this?</p>