I am having a problem with my jquery form. If you look at this fiddle where I am creating my form, you will notice that after an input field is created, then deleted, the alert messages start popping up on the next element (below where they initially are placed).

To clarify: If the user has not entered any information yet, the alerts pop up in the correct position (floated to the right side of the input field in red text). However, if the user has inputted information, then deletes it, the ajax alert ("this field is required") pops up in the wrong place in the field below where it is supposed to. To view the problem, type in all fields correctly, then delete your name. The message "this field is required" pops up in the email field, but it belongs in the name field.

The js that controls the validation is:

$(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 has not solved this issue. As it appears to be a problem with how the two plugins work together.

EDIT 2: There are actually two solutions to this problem. One is to include the jquery UI script into the head, thereby enabling its 'position' utility to align the error messages at the 'right top'.

The other solution, as noted by a few other contributors, is to modify the css to set

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 of the input.

Looks like a styling issue to me (but again, everything does :) with incorrectly used position:absolute, which, btw, cancels out float:left - http://jsfiddle.net/kmJ87/17/

If you're really attached to position:absolute (more styling in the full css, like a nice box message maybe?) you could fix it by adding position:relative to the parent element (paragraph in this case) - http://jsfiddle.net/kmJ87/18/

I faced the following issue while I submitting my form using jQuery FORM and doing POST submit.

When I type into input field an HTML comment:

< !-- #without space after < symbol

The request never goes submitted and it waits forever.

I believe that the reason is that the HTML comment ruins an XMLHttpRequest object and it never get parsed with PHP. I can just parse out the html comments from input fields before submitting, but something tells me, that its not the best solution to solve this. Does anybody know the best solution to avoid this issue to happen?

The HTML code of my form is the following:

<form method="post" action="/orders/place" class="form a-center" id="orderForm"> 
 <input type="text" x-webkit-speech="" value="Sign text" name="sign" id="sign">
 <textarea rows="7" name="comments" id="comments">Order comments</textarea>
 <p>
  <button id="orderSubmitBtn" class="button" type="submit">
 </p>        
</form>

The Javascript is a simple jQuery form submission:

var options = {
 dataType: 'json',
 success: function(data) { 
   if (data.ok) {
     //do some action here!
   }
 }
};
$('#orderForm').ajaxSubmit(options); 

The only case when it fails is the case when I input an html comment tag.

Also here is the link to the page containing the form http://sandsign.com (Just try entering < !-- text in a sign text a press Lets Go button)

Thanks to RoToRa - I narrowed down my research to PHP script I'm posting to. And realized that it's a bug in Zend Filter class :-(.

The following PHP code with Zend Framework for some reason freezes forever while receiving < !-- as a POST parameter :

$filterChain = new Zend_Filter();
$filterChain->addFilter(new Zend_Filter_StringTrim())
            ->addFilter(new Zend_Filter_StripTags());
$this->getHelper('viewRenderer')->setNoRender();
$signFiltered   = $filterChain->filter($_POST['sign']);

Thanks everybody for advices!