Question

When error messages appear in the form, they displace elements to the left. How can this be avoided?

Example

Answer 1

You need to use a custom error element placement (this would go inside .validate() ) like:

errorElement: "div",
errorPlacement: function(error, element) {
      element.before(error);
}

This would insert a div containing the error message right before the form element that is generating the error. By altering the 3rd line in the given example, you can move that element wherever you want. For example, based on your code, to move it completely outside the table, you would use:

errorElement: "div",
errorPlacement: function(error, element) {
      element.parent().parent().parent().before(error);
}

… and that would place it right before the entire form. Of course, it would be much more elegant to simply designate an error area outside the form …

<div id="error_goes_here"></div>
<form ...

… and then place the error there:

errorElement: "div",
errorPlacement: function(error, element) {
      $("#error_goes_here").html(error);
}

Depending on which way you decide to go, you might not even need to use errorElement, but just errorPlacement. The chosen answer to this question should also give you even more info on how to use it.

Hope this helps !

---

EDIT:

To position the error element to the right, add the error placement code inside .validate():

$("#commentForm2").validate({
    errorElement: "div",
    errorPlacement: function(error, element) {
        element.after(error);
    }
});

The generated error element is automatically assigned a class called .error, so, if needed, you can style with CSS:

div.error {
   // your CSS
}