title: Validate error message styling
body: <p>I am trying to get the jQuery Validate error class to display a certain way, but am having difficulty getting it to work. I am wanting the validation messages to appear directly under my inputs. Right now they appear under my inputs, however the entire input jumps down to the next line. </p>
  
  <p>The inputs set naturally like this:</p>
  
  <p>Name --  Number   --  Email</p>
  
  <p>I want the message to appear like this:</p>
  
  <p>Name --  Number --  Email</p>
  
  <p>Message -- Message -- Message</p>
  
  <p>Right now it is doing:</p>
  
  <p>Name</p>
  
  <p>Message</p>
  
  <p>Number</p>
  
  <p>Message</p>
  
  <p>Email</p>
  
  <p>Message</p>
  
  <p>The HTML looks like this:</p>
  
  <pre><code>&lt;form action="" method="POST" id="contact-form1"&gt;
                  &lt;input type="text" class="contact-input show-input" name="name" id="name" placeholder="Name *"&gt;
                  &lt;input type="text" class="contact-input show-input" name="number" id="number" placeholder="Phone Number *"&gt;
                  &lt;input type="text" class="contact-input show-input" name="email" id="email" placeholder="Email *"&gt;
                  &lt;input type="text" class="contact-input hidden-input" placeholder="Company Name"&gt;
                  &lt;input type="text" class="contact-input hidden-input" placeholder="Title"&gt;
                  &lt;input type="text" class="contact-input hidden-input" placeholder="Referral"&gt;
                  &lt;textarea class="contact-message" rows="10" name="message" id="message" placeholder="Your Message*"&gt;&lt;/textarea&gt;
                  &lt;input type="submit" value="Submit" id="contact-submit"&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>I tried wrapping divs around each input, but this put each input on a new line in a block format.</p>
  
  <p>Here is a fiddle to see what this is doing:  <a href="https://jsfiddle.net/b84eyynq/" rel="nofollow">Fiddle</a></p>
  
  <p>What am I doing wrong?</p>
  
  <p>UPDATE:</p>
  
  <pre><code> submitHandler: function(form) {
  
          var name = $("#name").val();
          var number = $("#number").val();
          var email = $("#email").val();
          var message = $("#message").val();
          /*var company_name = $("#company_name");
          var title = $("#title");
          var referral = $("#referral");*/
          //var targeted_popup_class = jQuery(this).attr('data-popup-open');
  
          $.ajax({
            url: "map-send.php",
            type: "POST",
            data: {
              "name": name,
              "number": number,
              "email": email,
              "message": message
              /*"company_name": company_name,
              "title": title,
              "referral": referral*/
            },
            success: function(data) {
  </code></pre>
  
  <p>In the code above you will see items commented out. These are the non-validated items. For some reason when I take away the comment tags my page dies. No errors, it just freezes when I submit the page. I tried taking the variables outside of the validate tags, but it still did not help. Do you know why this would kill the page?</p>