title: Positioning messages from jQuery Validation plugin
body: <p>i'm creating a form in a plugin for wordpress visible in frontend.
  Using a JQuery validation method, i have problems positioning each error exactly under each fields.</p>
  
  <p>So this is my script:</p>
  
  <pre><code>function validate_init() { ?&gt;
  &lt;script type="text/javascript"&gt;
      jQuery(document).ready(function($) {
          $('#form_register').validate({
              rules: {
                  ragsoc: {
                      required: true,
                      minlength: 2
                  },
  
                  piva: {
                      required: true,
                      digits: true,
                  },
  
                  gruppo: {
                      required: true,
                  },
              },
  
              messages: {
                  ragsoc: "Inserire la ragione sociale.",
                  piva: "Solo numeri accettati.",
                  gruppo: "inserire un valore.",
              },
              errorElement: "div",
              errorPlacement: function(error, element) {
                  error.insertAfter(element);
              },
          });
      });
  &lt;/script&gt;
      &lt;?php }
      add_action('wp_footer', 'validate_init', 999);
  </code></pre>
  
  <p>and this is my form:</p>
  
  <pre><code>&lt;?php echo '&lt;form id="form_register" method="post" action="'.$pluginfolder.'/submit.php"&gt;'; ?&gt;
    &lt;table width="100%" border="0" cellspacing="0" cellpadding="5"&gt;
      &lt;tr&gt;
        &lt;td colspan="3"&gt;&lt;label for="ragsoc"&gt;Ragione sociale *&lt;/label&gt;
        &lt;input type="text" name="ragsoc" id="long" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;label for="piva"&gt;Partita Iva *&lt;/label&gt;
        &lt;input type="text" name="piva" id="tris" /&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label for="codfisc"&gt;Codice Fiscale&lt;/label&gt;
        &lt;input type="text" name="codfisc" id="tris" /&gt;&lt;/td&gt;
        &lt;td&gt;&lt;label for="gruppo"&gt;Gruppo&lt;/label&gt;
        &lt;input type="text" name="gruppo" id="tris" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;label for="codice"&gt;Codice&lt;/label&gt;
              &lt;input type="text" name="codice" id="tris" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;label for="insegna"&gt;Insegna *&lt;/label&gt;
              &lt;select id="tris" name="insegna"&gt;
                  &lt;option value=""&gt;&lt;em&gt;Scegli...&lt;/em&gt;&lt;/option&gt;
                  &lt;option value="option_1"&gt;option_1&lt;/option&gt;
                  &lt;option value="option_2"&gt;option_2&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;label for="rapporto"&gt;Rapporto *&lt;/label&gt;
              &lt;select id="tris" name="rapporto"&gt;
                  &lt;option value=""&gt;&lt;em&gt;Scegli...&lt;/em&gt;&lt;/option&gt;
                  &lt;option value="option_1"&gt;option_1&lt;/option&gt;
                  &lt;option value="option_2"&gt;option_2&lt;/option&gt;
                  &lt;option value="option_3"&gt;option_3&lt;/option&gt;                
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td colspan="2"&gt;&lt;input type="submit" name="button" id="button" value="Invia" /&gt;
        &lt;input type="reset" name="button2" id="button2" value="Cancella" /&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>Finally this is my css:</p>
  
  <pre><code>div.error{
  color: #f33;
  padding: 0;
  margin: 2px 0 0 0;
  font-size: 0.7em;
  padding-left: 18px;
  background-image: url('error.png');
  background-position: 0 0;
  background-repeat: no-repeat; }
  </code></pre>
  
  <p>All it's working fine but the position of the error message is wrong for the three column fields where the errors overlap as in the next image:</p>
  
  <p><img src="https://i.stack.imgur.com/drnQO.jpg" alt="http://i.stack.imgur.com/HzshN.jpg"></p>
  
  <p>How can i obtain this effect (modified with photoshop):</p>
  
  <p><img src="https://i.stack.imgur.com/1tFq5.jpg" alt="http://i.stack.imgur.com/Q3MiU.jpg"></p>
  
  <p>Thanks in advance.</p>