Question

I was wondering, how can I move my jquery validation message to the right of the date picker icon? Is there something I can do in css, or is there someway I can place the label somehow. Really confused.

Currently, the validation message pushes my datepicker image to the right when a validation error occurs. I want that message to the right so the datepicker image stays the same.

Answer 1

You need to use the errorPlacement function in the jQuery validator to specify where you want to put the error message, like this:

        $("#myForm").validate({
            errorClass: "formInputInvalid",
            errorPlacement: function(error, element) {
                var trigger = element.next('.ui-datepicker-trigger');
                error.insertAfter(trigger.length > 0 ? trigger : element);
            }
        });

This examines the element directly following the invalid form input field – if it has the class ui-datepicker-trigger then it will place the error message to the right of that trigger. Otherwise it just puts the error message immediately after the invalid form element, like normal.