Embed Div Effectively Using JQuery Validation

Question

I have a jquery validation of the form as follows:

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

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

What I want to do is to efficiently configure the neighbor field on the same line as the error field, as follows:

HTML div:

 <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 many fields next to this. Please help. Thanks.

My decision

  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 can see, it is not clean and after proper validation the div space is not deleted.

Any idea on how to do this better.

Thanks.

Answer 1

What if you look at the height of your "ALPHABETS ONLY!" and just add that a lot of indentation / fields at the top of your other input field to dragging it out a lot?

This way you avoid creating any new elements, but you will have to remember to delete this field / addition when you get rid of "ALPHABETS ONLY!". element.

Answer 2

You could create an empty div on top of the inputs and declare them the width / height. Just as your browser will calculate this "empty space" using get-go, and you can insert the error message via $ ('divname'). HTML Just a thought. A view like this ..

http://jsfiddle.net/ng8VQ/72/

Answer 3

Since you have not yet placed a link to the page, there is no other choice but to accept and offer bad answers that could do the job.

Do it:

 $(this.initVariables.formId).validate({ errorElement: "div", errorPlacement: function(error, element) { error.insertBefore(element.parent()); error.insertBefore(element.parent().siblings()); //Insert something here that will overlay all the other errors //a div maybe, with opacity=1 leading them to be not visible. } } 

Do not forget to use a div with absolute positioning, otherwise it will put you in the same situation.

Perhaps this will give you an idea of ​​what I mean by example.

Answer 4

When you check that the check is clean, look at each other's error window and check if the HTML error is empty. If it is empty, delete it. Although this is still a hacker job.

 element.parent().parent().siblings.each( CheckEmpty ); function CheckEmpty() { if ( $( this ).html()==" " ) { $( this ).remove(); } } 

Or, if you give each empty error message a specific class, you can simply delete all of these elements with that class name. However, this can be more unpleasant, as it will remove all of them. This will not work if they have errors in several lines of the field, because by setting them, he will delete them all.

 $( ".blank" ).remove(); 

Answer 5

Put it all on the table. Enter <tr> and show the error inside the <td> this new <tr> . I hope I was very clear.

Answer 6

 <form id='register_frm' action='' method='post'> <input id="firstName" type="text" name="firstName" value=""> <div class='error-div'> <label class='error' for='firstName'></label> </div> <input id="lastName" type="text" name="lastName" value=""> <div class='error-div'> <label class='error' for='lastName'></label> </div> <input type='submit' value='Register' /> </form> $("#register_frm").validate({ errorClass:'error', rules: { firstName: "required", lastName: "required" } }); <style> .error{ color:red; font-size:12px; } .error-div{ height:15px; } </style>