Jquery Validation errorPlacement / submitHandler

Question

How do I write my js so that the responses from the jquery validation plugin are placed inside the form field boxes?

The html form looks like:

<form class="cmxform" id="commentForm" method="POST" action="">
<p>
 <label for="cname">Name</label>
 <input id="cname" type="text" name="name" size="60" class="required" minlength="2" />
</p>
<p>
 <label for="cemail">E-Mail</label>
 <input id="cemail" type="text" name="email" size="60"  class="required email" />
</p>
<p>
 <label for="curl">URL</label>
 <input id="curl" type="text" name="url" size="60"  class="url" value="" />
</p>
<p>
 <label for="ccomment">Your comment</label>
 <textarea id="ccomment" type="text" name="comment" cols="72" rows="8"  class="required"></textarea>
</p>
<p>
 <div id="button2"><input class="submit" id="submit_btn" type="submit" value="Send Email"/></div>
</p>
</form>

The js currently looks like this:

<script>
$(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;
        }
    });
});
</script>

Whats the proper js to put the errorPlacement inside the form fields' input value? So that if someone didn't include their email the response "this field is required" will appear inside the input value for email. Currently, it is returned after the input. Thank you.

do you mean over write the values in inputs? really not clear how you want errors — charlietfl
really makes little sense so far. If you over write values, how does user see or edit them? — charlietfl
I mean if the email or name field is left blank, the js returns the response "this field is required" inside the form field as a 'focus' event. I apologize for any confusion in my wording of the issue. Thank you — Nick B
not hard to do it but would take some time to code and debug the logic and integrate with plugin...afraid I can't help right now. If this is of any help have at it jsfiddle.net/charlietfl/2SdFR/2 — charlietfl

Ryley Ryley · Accepted Answer · 2012-03-05T16:45:19

Validation offers the option errorPlacement which is a function for exactly this purpose.

I wrote this up quickly for you using jQuery UI's position utility (so you'd have to include jQuery UI to make my version work):

  //in your $.validate options, add this
  errorPlacement: function(error, element) {
      error.insertAfter( element).position({
          my:'right top',
          at:'right top',
          of:element          
      });
   }

Note I also defined this CSS:

label.error { color: red; position:absolute; }

See it in action here: http://jsfiddle.net/ryleyb/Z64Tv/

Jquery Validation errorPlacement / submitHandler

1 Answers