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 = '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>');
                        }
                        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">

Recommended Answers

All 3 Replies

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.

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

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;  
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.