Javascript form validation taking a long time to run
<p><strong>The question</strong>: How do I go about speeding up the validation, while continuing to use jqBootstrapValidation as my validator?</p>

<p><strong>The problem</strong>:
I have a small contact form setup really nicely using jqBootstrapValidation as a validator, but when I start adding additional fields it becomes very slow, to the point where if i type multiple characters into a form field it takes the validator over a second to respond.</p>

<p>The slow down can be easily observed with 20-30 form fields.</p>

<p><strong>I have tried</strong>:
So far I have tried a number of things like hiding elements using <code>style="display: none;"</code>, but that seems to make no difference to the speed.</p>

<p>I could process the form in parts before I submit it, but I have not had a lot of luck going about it. Is there a better way to approach this situation, maybe there is something simple that I am missing because I am relatively new to JavaScript?</p>

<p><strong>My current form/js</strong>: Works well until we add more form fields.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;title&gt;My Title&lt;/title&gt;
&lt;/head&gt;
&lt;body id="page-top" class="index"&gt;
    &lt;form name="sentMessage" id="contactForm" novalidate&gt;
        &lt;div class="control-group"&gt;
            &lt;label&gt;Name&lt;/label&gt;
            &lt;input type="text" placeholder="Name" id="name" required data-validation-required-message="Please a name."&gt;
            &lt;p class="help-block text-danger"&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="control-group"&gt;
            &lt;label&gt;Message&lt;/label&gt;
            &lt;textarea rows="3" placeholder="Message" id="message" required data-validation-required-message="Enter a message."&gt;&lt;/textarea&gt;
            &lt;p class="help-block text-danger"&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;br&gt;
        &lt;div id="success"&gt;&lt;/div&gt;
        &lt;div&gt;
                &lt;button type="submit"&gt;Click to send&lt;/button&gt;
        &lt;/div&gt;
    &lt;/form&gt;

    &lt;!-- jQuery --&gt;
    &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
    &lt;!-- Contact Form Script --&gt;
    &lt;script src="js/jqBootstrapValidation.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    $(function() {
        $("#contactForm input,#contactForm textarea").jqBootstrapValidation();
    });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<hr>

<p>Validator used:
<a href="http://ReactiveRaven.github.com/jqBootstrapValidation/" rel="nofollow">http://ReactiveRaven.github.com/jqBootstrapValidation/</a></p>