title: jquery validation div
body: <p>I am using <strong>jquery.validate.js</strong> plugin for a dialog validation. My problem is that I would like on submit only the first problematic field to get a class and the field error to be displayed as a tip in a fading out div next to the field. (write now the plug in adds labels on every field)</p>
  
  <p><img src="https://i.stack.imgur.com/9FfHa.jpg" alt="enter image description here"></p>
  
  <p>I hope I was clear enough!</p>
  
  <p>Thank you in advance!!!</p>
  
  <p>(if you need anything more please ask for it)</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The code for it</p>
  
  <pre><code>$("#wdw1003_useraddform").validate({
      rules : {
          wdw1003_username : {
              required : true
          },
          wdw1003_password : {
              required : true
          },
          wdw1003_fullname : {
              required : true
          },
          wdw1003_email : {
              required : true,
              email : true
          }
      },
      messages : {
          wdw1003_username : {
              required : "Field User Name is required"
          },
          wdw1003_password : {
              required : "Password is required"
          },
          wdw1003_fullname : {
              required : "Field Full Name is required"
          },
          wdw1003_email : {
              required : "Field E-mail is required",
              email : "Is not a valid e-mail"
          }
      }
  });
  </code></pre>
  
  <p><strong>EDIT after ankur20us comment</strong></p>
  
  <p>The form is generated with this lines</p>
  
  <pre><code>$form = new Form('useraddform', '#', $id."_");
  $form -&gt; setRequired('&lt;img src="images/required.png" alt="Required" align="absmiddle" /&gt;', '&lt;img src="images/required.png" alt="Required" align="absmiddle" /&gt;' . $trans -&gt; translate('denotes required field'));
  $form -&gt; addElement('text', 'username', $trans -&gt; translate('User Name'));
  $form -&gt; addElement('password', 'password', $trans -&gt; translate('Password'));
  $form -&gt; addElement('text', 'fullname', $trans -&gt; translate('Full Name'));
  $form -&gt; addElement('text', 'email', $trans -&gt; translate('E-mail'));
  $form -&gt; addElement('select', 'perms', $trans -&gt; translate('Permissions'), array('options' =&gt; $perms, 'value' =&gt; 'level1'));
  $form -&gt; addElement('select', 'status', $trans -&gt; translate('Status'), array('options' =&gt; $status, 'size' =&gt; "1"));
  $form -&gt; addElement('textarea', 'comments', $trans -&gt; translate('Comments'));
  $form -&gt; addElement('select', 'lang', $trans -&gt; translate('Language'), array('options' =&gt; $langs, 'size' =&gt; "1"));
  $form -&gt; addElement('submit', 'submit', $trans -&gt; translate('Create User'), array('style' =&gt; "clear:both; float:right; margin-right: 8%;"));
  </code></pre>
  
  <p>The javascript above comes out of these lines</p>
  
  <pre><code>     $form -&gt; addRule('username', 'required', $trans -&gt; translate('Field User Name is required'));
  $form -&gt; addRule('password', 'required', $trans -&gt; translate('Password is required'));
  $form -&gt; addRule('fullname', 'required', $trans -&gt; translate('Field Full Name is required'));
  $form -&gt; addRule('email', 'required', $trans -&gt; translate('Field E-mail is required'));
  $form -&gt; addRule('email', 'email', $trans -&gt; translate('Is not a valid e-mail'));
  </code></pre>
  
  <p>So I can not change much!!!</p>