 <p>Using <code>invalidHandler</code> is one way to do this, but if you use the <code>errorContainer</code> option, jQuery validate will take care of hiding and showing the message for you. For example:</p> <p><strong>Html:</strong></p> <pre><code>&lt;form id="test"&gt; &lt;label for="name"&gt;Name&lt;/label&gt; &lt;input id="name" type="text" name="name" class="required"/&gt; &lt;label for="age"&gt;Age&lt;/label&gt; &lt;input id="age" type="text" name="age" class="required"/&gt; &lt;input type="submit" /&gt; &lt;/form&gt; &lt;div id="invalid"&gt;You have errors the on page&lt;/div&gt;​ </code></pre> <p><strong>CSS</strong></p> <pre><code>#invalid { display: none; } </code></pre> <p><strong>JavaScript:</strong></p> <pre><code>$("#test").validate({ errorContainer: "#invalid" }); </code></pre> <p><strong>Example:</strong> <a href="http://jsfiddle.net/andrewwhitaker/deArQ/" rel="nofollow">http://jsfiddle.net/andrewwhitaker/deArQ/</a></p>