I am using the jQuery validation plug in on a website I am creating. The validation works, and the messages are set, however when they get displayed on my webpage they have line breaks. I only display one message at a time so I dont know why a single message would end up on more then one line.

I want to display the errors on one line, please help.

Code for document_ready.js:

    // Form validation for contact page
        groups: {
            myrequired: "name phone email"

        rules: {
            'name': {
                required: true,
            'phone': {
                required: true,
            'email': {
                required: true,

        messages: {
            "name": {
                required: "Enter your name",
                minlength: "Enter your name",
            "phone": {
                required: "Enter a phone number",
                minlength: "Phone number to short",
                number: "Enter a valid phone number"
            "email": {
                required: "Enter an email address",
                minlength: "Enter an email address",

        errorPlacement: function(error, element){
            if(element.attr("name") == "name" || element.attr("name") == "email" || element.attr("name") == "phone"){

Code for contact.php:

                        $name = $_POST['name'];
                        $company = $_POST['company'];
                        $address = $_POST['address'];
                        $email = $_POST['email'];
                        $phone = $_POST['phone'];
                        $type = $_POST['companytype'];
                        $service = $_POST['service'];
                        $budget = $_POST['budget'];
                        $user_message = $_POST['message'];

                        $to = 'email@gmail.com';
                        $subject = ''.$name.'contacting';
                        $message = '\nFull Name: '.$name.'\nCompany: '.$company.'\nAddress: '.$address.'\nEmail: '.$email.'\nPhone: '.$phone.'\nCompany Type: '.$type.'\nService: '.$service.'\nBudget: '.$budget.'\nMessage: '.$user_message.'';
                        $header = 'From: mail.interwebs.net';

                        if(mail($to, $subject, $message, $header)){
                            echo('<div id="errorbox"><label> </label><label> </label><span id="success">Thank you for contacting us. We will review your information and respond as soon as possible.</span></div>');
                            echo('<div id="errorbox"><label> </label><label> </label><span id="error">There was an error, could not send form.</span></div>');
                    else {
                        echo('<div id="errorbox"><label> </label><label> </label><span id="error"></span></div>');
                <form action="site/contact.php" method="post" class="contact">
                        <legend>Basic Information</legend>
                        <label for="name">* Full Name:</label>
                        <input type="text" name="name" class="required" />

                        <label for="company">Company:</label>
                        <input type="text" name="company" />

                        <label for="address">Address:</label>
                        <input type="text" name="address" />

                        <label for="email">* Email:</label>
                        <input type="email" name="email" class="required email" />

                        <label for="phone">* Phone:</label>
                        <input type="tel" name="phone" class="required" />

                        <label for="companytype">Type:</label>
                        <select name="companytype">
                            <option value="restaurant">Restaurant</option>
                            <option value="service">Non-Restaurant</option>
                        <legend>Interested In</legend>
                        <label for="service">Service:</label>
                        <select name="service">
                            <option value="tvcommercial">TV Commercial</option>
                            <option value="videotour">Web Video</option>
                            <option value="sponsorship">Website Sponsorship</option>
                            <option value="signaturedish">Other</option>

                        <label for="budget">Budget:</label>
                        <select name="budget">
                            <option value="1000">$1,000</option>                            
                            <option value="3000">$3,000</option>
                            <option value="5000">$5,000</option>
                            <option value="10000">$10,000</option>
                            <option value="15000">$15,000+</option>

                        <label for="message">Message:</label>
                        <textarea name="message" rows="20" cols="20" id="message" placeholder="Add extra information here">
5 Years
Discussion Span
Last Post by Travus


ID's are meant to be unique. If you want to reuse them you should use class instead. It could be the reason for the mess up.


You may override the default containers for the validation which might help you manipulate the provided error message with your own styling.

    errorClass: 'invalid',
    errorElement: 'label',
    wrapper: '<div class="error-inline" ></div>',

probably the plugin has default css or markup which causes it to have line breaks


Solved, I was over thinking it. Just some simple css. Thank you all who replied. Also note that I am forcing only one error to be displayed at a time so thats why I use id instead of class.

label.error {
    font-family: Century Gothic, sans-serif;
    font-weight: bold;
    float: none; 
    color: red;
    padding-left: .3em; 
    vertical-align: top;  

Edited by Travus

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.