jQuery form validation plugin: error message has line breaks.

[Travus]

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:

$(document).ready(function(){
    // Form validation for contact page
    $(".contact").validate({
        groups: {
            myrequired: "name phone email"
        },

        rules: {
            'name': {
                required: true,
                minlength:1,
            },
            'phone': {
                required: true,
                minlength:7,
                number:true
            },
            'email': {
                required: true,
                minlength:1,
            }
        },

        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"){
                error.replaceAll('#error');
            }
            else{
                error.appendTo(element);
            }
        }
    });
    ...etc

Code for contact.php:

<?php
                    if(isset($_POST['submit'])){
                        $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 = '[e-mail]';
                        $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>');
                        }
                        else{
                            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">
                    <fieldset>
                        <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>
                        </select>
                    </fieldset>
                    <fieldset>
                        <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>
                        </select>

                        <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>
                        </select>

                        <label for="message">Message:</label>
                        <textarea name="message" rows="20" cols="20" id="message" placeholder="Add extra information here">

[pritaeas]

id="errorbox"

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.

[lambing]

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

$('.contact').validate({
    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

[Travus]

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;  
}