JQuery Conflict Ajax Validation Messages Return

Question

I am having a problem with my jquery form. If you look at the fiddle where I create my form, you will notice that after creating the input field, then remove the warning message will begin to appear on the next element (below where they are initially located).

To clarify: if the user has not yet entered any information, warnings will appear in the correct position (with a floating point to the right of the input field in red text). However, if the user enters information, then deletes it, the ajax warning ("this field is required") appears in the wrong place in the field below where it is supposed. To view the problem, enter all the fields correctly, and then delete your name. The message "this field is required" appears in the email field, but it belongs to the name field.

js that controls the check:

$(document).ready(function() { $('#commentForm').validate({ submitHandler: function(form) { $.ajax({ type: 'POST', url: 'process.php', data: $(this).serialize(), success: function(returnedData) { $('#commentForm').append(returnedData); } }); return false; }, errorPlacement: function(error, element) { error.insertAfter( element).position({ my:'right top', at:'right top', of:element }); } }); }); 

EDIT 1: Using jQuery NoConflict mode did not solve this problem. The problem seems to be related to how the two plugins work together.

EDIT 2: There are actually two solutions to this problem. One of them is to include a jQuery UI script in the head, thereby allowing its "position" utility to align error messages in the "upper right corner".

Another solution, as some other participants noted, is to change the css for installation

 form p { position: relative; /* This ensures error label is positioned within the p tag */ } label.error { top: 0; /* This ensures that it lines up with the top of the input */ right:90px; color: red; position:absolute; } 

Thanks for all the input.

Answer 1

It looks like a style question for me (but again, it does everything :) with the wrong position: absolute, which, by the way, cancels float: left - http://jsfiddle.net/kmJ87/17/

If you are really attached to the position: absolute (more styles in full css, for example, as a message with a good field)? You can fix this by adding a position: relative to the parent (in this case a paragraph) - http://jsfiddle.net/kmJ87/18/

Answer 2

The problem lies partially in CSS declarations:

 /* Begin first declaration for <label class="error" /> */ label.error { color: red; position:absolute; } /* Begin second declaration for <label class="error" />. Nothing inherently wrong with this, but a bit odd considering the simplified fiddle.*/ label.error { float: left; /* Kinda replaces previously declared absolute position as "float" and "position" are kinda, but not really, mutually exclusive properties. */ right: 30px; /* Useless declaration (for now) as "right" is used wih "position" not "float". */ color: #ff714d; position: absolute; /* Replaces previously declared float and makes the previously assigned "right" property useful again. */ font-family: 'subhead', helvetica, verdana; letter-spacing: 1px; text-transform: lowercase; } 

Since position: absolute; - the last announcement (in positions v. float declarations), the element is positioned absolutely.

The first part of the problem is that, since the top property was not declared, but the display block label, the browser positions the top part on the next line down (where the top one will be in the static stream).

The second part of the problem is that since float declared, the browser is still trying to float element as well (which ends again when the browser positions the top on the next line down).

The solution (for now) is to remove the float declaration and declare top 0 in label.error styles.

 label.error { color: red; position:absolute; } label.error { top: 0; /* Replaces "float: left;" and fixes the display. */ right:30px; color: #ff714d; position: absolute; font-family: 'subhead', helvetica, verdana; letter-spacing: 1px; text-transform: lowercase; } 

or in one ad:

 label.error { color: red; position: absolute; right: 30px; top: 0; color: #ff714d; position: absolute; font-family: 'subhead', helvetica, verdana; letter-spacing: 1px; text-transform: lowercase; } 

Updating the code for this is the ultimate problem, which is that all error messages are now displayed at the very top of the document.

This is caused by the declaration of position: absolute; , since elements that are absolutely located are removed from the normal document flow and placed (absolutely) in the nearest non-statically located anscestor element.

In this case, there are none, so the <label class="error" /> elements are absolutely located on <body /> . Thus, the final part of the solution is to ensure that the elements p not statically positioned (since errors should be absolutely marked there).

Final CSS:

 p { position: relative; } label.error { color: red; position: absolute; right: 30px; top: 0; color: #ff714d; position: absolute; font-family: 'subhead', helvetica, verdana; letter-spacing: 1px; text-transform: lowercase; } 

Updated (and working) script.

Answer 3

jcps javascript should not affect the page as it defines only the object and is not actually used (yet). When I was messing around with the code, I also ran into problems, even if jcps javascript was commented out.

It seemed that the browser had a problem with the layout of the label inside the paragraph, changing the paragraphs to divs with a relative position and adding top 0px to the error style, which became more stable. I noticed that the validator still has some intermittent problems, possibly caused by some minor bugs.

This is the version I ended up with: http://jsfiddle.net/kmJ87/20/

Answer 4

We can declare a document.ready method in two ways

• $ (document) .ready (function () {

  // our code comes here

  }); Here $ is a global variable and refers to a jQuery object.

• jQuery (document) .ready (function ( $ ) {

  // Our code comes here

  }); // Here $ is a local variable and refers to a jQuery object.

Check out this link 5th point: http://net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

Answer 5

Many JavaScript libraries use $ as the name of a function or variable, as jQuery does. In the case of jQuerys, $ is just an alias for jQuery, so all functions are available without using $. If we need to use another JavaScript library with jQuery, we can return the $ control back to another library with jQuery.noConflict ();

see an example here:

  jQuery.noConflict(); (function($) { // your code goes here }) (jQuery); 

try with it