Simple jquery validation - posting error messages to user position

Question

I use the jquery validate plugin to check the number in the form , how can I put the returned error message under the enter button, I can not reach,

Here is my image with the problem and what I need, pls check - http://i.imgur.com/Gt5aNxs.png

Please suggest me put the error message in the custom div under the button, and not the default under.

Here is my code:

<section id="contact" class="content"> <div class="container"> <h2>Contact Form Demo</h2> <div class="row"> <div class="span12 contact-form"> <form action="mail.php" method="POST" class="form-horizontal contact-form" id="contact-form"> <!--<?php $formKey->outputKey(); ?> --> <fieldset> <div class="control-group"> <label class="control-label" for="inputPhone">Phone</label> <div class="controls"> <input class="input-80" name="phone" type="text" id="inputPhone" placeholder="inc. country &amp; area code"> </div> </div> <div class="control-group"> <div class="controls"> <button type="submit" value="Send" class="btn" id="btn-place">Send!</button> </div> <div >place here</div> </div> </fieldset> </form> </div> </div> </div> </section> <!-- javascript --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/jquery.validate.min.js"></script> <script> // contact form validation $(document).ready(function(){ $('#contact-form').validate( { rules: { name: { minlength: 3, required: true }, email: { required: true, email: true }, phone: { minlength: 11, required: false, number: true }, subject: { minlength: 3, required: true }, message: { minlength: 20, required: true } }, highlight: function(label) { $(label).closest('.control-group').addClass('error'); }, success: function(label) { label .text('OK!').addClass('valid') .closest('.control-group').addClass('success'); } }); // contact form submission, clear fields, return message,script no shown here </script> 

Answer 1

All you have to do is to specify errorLabelContainer in your parameters and indicate the div in which you want to include errors:

 $('#contact-form').validate({ //all your other options here errorLabelContainer: '#errors' }); 

Then just make sure you indicate that your place here div has id errors as follows:

 <div id="errors"></div> 

See a working example here: http://jsfiddle.net/ryleyb/aaEFQ/ (note that I also specified a wrapper parameter, which you probably want if there are a few errors).

Answer 2

 errorPlacement: function(error, element) { if((element.attr('name') === 'color[]')){ error.appendTo("div#errors"); } else if(element.attr('name') === 'font[]' ){ error.appendTo("#font-error"); } else{ element.before(error); } }