title: how jquery validator can custom divs for both error and success
body: <p>I've been looking for a day now trying to figure out how I can get real time error messages to appear, each in a different div. </p>
  
  <p>I am using custom icons and divs for each input field and for each error, as well as success icons for each input field too. However, the code I have been trying strangely changes when other input field are clicked. </p>
  
  <p>here is the JS : </p>
  
  <pre><code>$(function validate() {
  var  invalidFirstName = $("#blankField"),
      validFirstName = $('#validCheck');
    var  rules = {
      rules: {
         user_first_name: {
              required: true
          }
  
      errorPlacement: function (error,element) {
          if (element.attr("name") == "user_first_name"){
              (invalidFirstName).removeClass('hidden');
              (validFirstName).addClass('hidden');
  
          }
      },
  
      success: function() {
        //  if (element.attr("name") == "user_first_name"){
              (invalidFirstName).addClass('hidden');
              (validFirstName).removeClass('hidden');
         // }
      }
  };
  
  $('#briefStepOne').validate(rules);
  
  });
  </code></pre>
  
  <p>As you can see I tried to do an if statement too, but then it doesn't work at all! Any help would be great. </p>
  
  <p>here is the layout of my html : </p>
  
  <pre><code> &lt;div class="form-fields input-text"&gt;
          &lt;div class="input-interaction-container"&gt;
              &lt;label for="user_first_name" class="user_first_name"&gt;First Name&amp;#42;&lt;/label&gt;
  
  
              &lt;input type="text" name="user_first_name" id="user_first_name" maxlength="50" class="user_first_name"&gt;
          &lt;/div&gt;
  
  
          &lt;div class="form-error-section pure-hidden-phone hidden" id = "blankField"&gt;
              &lt;i class="fa fa-minus-circle"&gt;&lt;/i&gt;
              &lt;p&gt;Field cannot be left blank&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=" hidden form-error-section valid-icon pure-hidden-phone" id="validCheck"&gt;
              &lt;i class="fa fa-check-circle"&gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-fields input-text"&gt;
          &lt;div class="input-interaction-container"&gt;
              &lt;label for="user_last_name"&gt;Last Name&amp;#42;&lt;/label&gt;
              &lt;input type="text" name="user_last_name" id="user_last_name" maxlength="50"&gt;
          &lt;/div&gt;
          &lt;div class=" hidden form-error-section pure-hidden-phone"&gt;
              &lt;i class="fa fa-minus-circle"&gt;&lt;/i&gt;
              &lt;p&gt;Field cannot be left blank&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=" hidden form-error-section valid-icon pure-hidden-phone"&gt;
              &lt;i class="fa fa-check-circle"&gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>UPDATED JS FILE:</p>
  
  <pre><code>$(document).ready(function() {
      $('#briefStepOne'.validate({
  
          rules: {
  
              user_first_name: {
                  required: true
              },
              user_last_name:{
                  required:true
              },
              user_email_address:{
                  required:true
              }
          },
  
          errorPlacement: function(error,element) {
  
              if (element.attr('name') == 'user_first_name'){
  
                  $('#blankField').removeClass('hidden');
                  $('#validCheck').addClass('hidden');
              } else if (element.attr('name') == 'user_last_name'){
  
                  $('#last-name-empty').removeClass('hidden');
                  $('#last-name-good').addClass('hidden');
  
              }
  
          },
  
          success: function(label) {
  
              if (label.attr('id') == 'user_first_name-error'){
  
                  $('#blankField').addClass('hidden');
                  $('#validCheck').removeClass('hidden');
  
              } else if (label.attr('id') == 'user_last_name-error'){
                  $('#last-name-empty').addClass('hidden');
                  $('#last-name-good').removeClass('hidden');
  
              }
          }
  
  
      }));
      });
  </code></pre>