title: Override default jquery-steps error message
body: <p>I'm sure I'm just overlooking something simple...but I want to display a text error message next to the invalid input item (such as a text box) in the jQuery-steps form validation.  Code base on Jquery-steps, <a href="http://www.jquery-steps.com/Examples#basic-form" rel="nofollow">here</a>.</p>
  
  <p>From what I've been reading this should do the trick:</p>
  
  <pre><code>&lt;script&gt;
      $(function ()
      {
  
  /*            function errorPlacement(error, element)
          {
              element.before(error);
          }*/
  
          $("#form").validate({
              rules: {
                  zip: {
                      required: true,
                      digits:true,
                      maxlength:5,
                      minlength:5
                      },
                  messages: {
                      zip: "entr da zip dode"
                      }
              }
          });
  
          $("#wizard").steps({
              headerTag: "h3",
              bodyTag: "section",
              transitionEffect: "slideLeft",
              onStepChanging: function (event, currentIndex, newIndex)
              {
                  // Allways allow step back to the previous step even if the current step is not valid!
                  if (currentIndex &gt; newIndex)
                  {
                      return true;
                  }
  
                $("#form").validate().settings.ignore = ":disabled,:hidden";
                  return $("#form").valid();
  
              },
              onFinishing: function (event, currentIndex)
              {
                  $("#form").validate().settings.ignore = ":disabled";
                  return $("#form").valid();
              },
              onFinished: function (event, currentIndex)
              {
                  alert("Thank you! Your request has been sumbitted.");
              }
          });
      });
  
      //PHONE NUMBER MASKING FUNCTION     
      jQuery(function($){
         $("#phone").mask("999-999-9999",{placeholder:" "});
      });
  </code></pre>
  
  <p>    </p>
  
  <p>But the validation simply ignores this and just adds 'class="error"' to the invalid items, but not appending a label or div (etc) to display the messages.</p>
  
  <p>What did I miss?</p>