how to position Jquery validate() error message along the side of my text input

Question

As you'll see in my code I'm been using the errorPlacement method. I first tried using an if else statement inside the method and the error message would at least show, but only underneath the input, not along side like I want. Since I have 6 inputs to test, I'm using the switch statement, which won't work for me at all. I have some css applied to the divs that the inputs are in, I don't know if this is interfering with where the message goes or what.

HTML

<div id ="column1">
             <label>Name of Show</label><input type="text" name="performance" id="performance" /> 

             <label>Name of location</label> <input type="text" name="location" id="location"/>  

            <label>Date</label> <input type="text" id="date" name="date"/> 
</div>

         <div id="column2">

              <label>Time</label><input type="text" id="time" name="time"/>

              <label># of Volunteers Needed</label><input type="text" id="guests" name="guests"/>

              <label>Cover</label><input type="text" id="price" name="price"/>

        </div>

JS   

//this is just the error placement block, the other validate() code is working fine and omitted

errorPlacement: function(error, element){

                               switch(element)
                                         {
                                    case element.attr("name") === 'performance': 
                                               error.insertAfter( $("#performance") );
                                                break;
                                         case element.attr("name") === 'location':
                                                    error.insertAfter( $("#location") );
                                                     break;
                                             case element.attr("name") === 'date':
                                                        error.insertAfter( $("#date") );
                                                        break;
                                                case element.attr("name") === 'time':
                                                            error.insertAfter( $("#time") );
                                                            break;
                                                     case element.attr("name") === 'guests':
                                                          error.insertAfter( $("#guests") );
                                                                break;
                                                     case element.attr("name") === 'price':
                                                           error.insertAfter( $("#price") );
                                                                    break;
                                                                default:
                                              //nothing
                                            }

                               },

Answer 1

Your code:

errorPlacement: function (error, element) {
    switch (element) {
        case element.attr("name") === 'performance':
            error.insertAfter($("#performance"));
            break;
        case element.attr("name") === 'location':
            error.insertAfter($("#location"));
            break;
        case element.attr("name") === 'date':
            error.insertAfter($("#date"));
            break;
        case element.attr("name") === 'time':
            error.insertAfter($("#time"));
            break;
        case element.attr("name") === 'guests':
            error.insertAfter($("#guests"));
            break;
        case element.attr("name") === 'price':
            error.insertAfter($("#price"));
            break;
        default:
            //nothing
    }
},

Your code is unnecessarily repetitive, to say the least, and a bit redundant.

error.insertAfter(element) is already the default and it generically applies to all fields automatically. There is no need to over-ride this unless you want to do something else.

This is the default errorPlacement function:

errorPlacement: function(error, element) {
    error.insertAfter(element); // <- the default
},

error - the label object containing the error message.
element - the input object with the error.

As you can see, you do not need to specify errorPlacement at all if you simply want each error messages to be inserted after each element.

See this jsFiddle which shows the default error message placement:

http://jsfiddle.net/85xwh/

You can "un-comment" the errorPlacement section and see that the behavior is exactly identical:

http://jsfiddle.net/85xwh/1/

If you're not getting the expected message placement, it's either because your CSS is moving it, your HTML layout is blocking or wrapping it, or some combination of both. You have not shown enough code for me to duplicate anything meaningful.

However, if you want to try to apply some CSS to only the error messages, use something like this, assuming you're using the default error container, <label>, and the default error class, .error...

label.error {
   /* my custom css */
}