簡單的jQuery驗證 - 自定義位置錯誤信息放置

Question

我使用JQuery驗證插件來驗證一個表單號，我怎麼可以把輸入按鈕下返回的錯誤信息，我無法實現，

這裏是我的問題，我需要什麼樣的形象，請您檢查 - http://i.imgur.com/Gt5aNxs.png

請建議我如何把錯誤信息在自定義事業部的按鈕下，而不是默認的下方。

這裏是我的代碼：

<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

所有你需要做的就是指定你的選擇的errorLabelContainer並指定要在錯誤進入格：

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

然後，只需請確保你指定你的place here股份有這樣的編號errors：

在此處查看一個工作示例：http://jsfiddle.net/ryleyb/aaEFQ/（請注意，我還指定了wrapper選項，如果存在多個錯誤，您可能需要該選項）。

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); 
    } 
}