Question

I have a Jquery validation of form as follows:

$(this.initVariables.formId).validate({
     errorElement: "div",
     errorPlacement: function(error, element) {
        error.insertBefore(element.parent());
     }
}

The problem is when an error appears, the form becomes distorted as follows:

What I want to do is to adjust effectively the neighbor field the same line as the error field as follows:

HTML code of div is:

<div class="relatedField>
    <div id="wwgrp_addForm_summaryData_firstName" class="wwgrp" style="float: left; padding-right: 6px;">
          <div id="wwlbl_addForm_summaryData_firstName" class="wwlbl"> 
              <label class="label" for="addForm_summaryData_lastName"> FIRST NAME </label>
          </div>
          <div id="wwctrl_addForm_summaryData_firstName" class="wwctrl">
               <input id="addForm_summaryData_firstName" class="storedPaymentInput_size4 alphabet" type="text" value="" name="summaryData.firstName">
          </div>
    </div>
    <div id="wwgrp_addForm_summaryData_lastName" class="wwgrp" style="float: left; padding-right: 6px;">
          <div id="wwlbl_addForm_summaryData_lastName" class="wwlbl"> 
              <label class="label" for="addForm_summaryData_lastName"> LAST NAME </label>
          </div>
          <div id="wwctrl_addForm_summaryData_lastName" class="wwctrl">
               <input id="addForm_summaryData_lastName" class="storedPaymentInput_size4 alphabet" type="text" value="" name="summaryData.lastName">
          </div>
    </div>
</div>

How can i do this using jquery without changing the implementation of my form. I have lots of field beside this. Please help. Thank you.

My solution is

 errorPlacement: function(error, element) {
     error.insertBefore(element.parent());
     element.parent().parent().siblings().each( function () {
           var child = $(this).children("div.wwctrl");
        $("<div class='SPACE'>&nbsp;</div>").insertBefore(child);
      });
 }

But as you could see, it is not clean and after the correct validation, the div space is not removed.

Any idea on how to do this better.

Thank you.

Answer 1

What if you look at the height of your “ALPHABETS ONLY!” element and just add that much padding/margin to the top of your other input field to push it down exactly that much?

This way, you would avoid creating any new elements, but you’d have to remember to remove this margin/padding when you get rid of the “ALPHABETS ONLY!” element.