Jquery validate: how to save error messages from form changes

Question

When error messages appear on the form, they move the items to the left. How can this be avoided?

Example

Answer 1

You need to use your own placement of the error elements (this will go inside .validate()), for example:

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

This will insert a div containing the error message right before the form element that generates the error. By changing the third line in this example, you can move this element wherever you want. For example, based on your code, to completely move it outside the table, you should use:

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

... . , ...

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

... :

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

, , errorElement, errorPlacement. , .

, !

---

EDIT:

, .validate():

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

.error, CSS:

div.error {
   // your CSS
}