從jQuery驗證插件定位消息

Question

我在wordpress插件中爲前端創建了一個窗體。 使用JQuery驗證方法，我有問題在每個字段下精確定位每個錯誤。

所以這是我的腳本：

function validate_init() { ?> 
<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     $('#form_register').validate({ 
      rules: { 
       ragsoc: { 
        required: true, 
        minlength: 2 
       }, 

       piva: { 
        required: true, 
        digits: true, 
       }, 

       gruppo: { 
        required: true, 
       }, 
      }, 

      messages: { 
       ragsoc: "Inserire la ragione sociale.", 
       piva: "Solo numeri accettati.", 
       gruppo: "inserire un valore.", 
      }, 
      errorElement: "div", 
      errorPlacement: function(error, element) { 
       error.insertAfter(element); 
      }, 
     }); 
    }); 
</script> 
    <?php } 
    add_action('wp_footer', 'validate_init', 999); 

，這是我的表單：

<?php echo '<form id="form_register" method="post" action="'.$pluginfolder.'/submit.php">'; ?> 
    <table width="100%" border="0" cellspacing="0" cellpadding="5"> 
    <tr> 
     <td colspan="3"><label for="ragsoc">Ragione sociale *</label> 
     <input type="text" name="ragsoc" id="long" /></td> 
    </tr> 
    <tr> 
     <td><label for="piva">Partita Iva *</label> 
     <input type="text" name="piva" id="tris" /></td> 
     <td><label for="codfisc">Codice Fiscale</label> 
     <input type="text" name="codfisc" id="tris" /></td> 
     <td><label for="gruppo">Gruppo</label> 
     <input type="text" name="gruppo" id="tris" /></td> 
    </tr> 
    <tr> 
     <td> 
      <label for="codice">Codice</label> 
      <input type="text" name="codice" id="tris" /> 
     </td> 
     <td> 
      <label for="insegna">Insegna *</label> 
      <select id="tris" name="insegna"> 
       <option value=""><em>Scegli...</em></option> 
       <option value="option_1">option_1</option> 
       <option value="option_2">option_2</option> 
      </select> 
     </td> 
     <td> 
      <label for="rapporto">Rapporto *</label> 
      <select id="tris" name="rapporto"> 
       <option value=""><em>Scegli...</em></option> 
       <option value="option_1">option_1</option> 
       <option value="option_2">option_2</option> 
       <option value="option_3">option_3</option>     
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2"><input type="submit" name="button" id="button" value="Invia" /> 
     <input type="reset" name="button2" id="button2" value="Cancella" /> 
    </tr> 
    </table> 
    </form> 

最後，這是我的CSS：

div.error{ 
color: #f33; 
padding: 0; 
margin: 2px 0 0 0; 
font-size: 0.7em; 
padding-left: 18px; 
background-image: url('error.png'); 
background-position: 0 0; 
background-repeat: no-repeat; } 

它的所有工作正常，但位置的錯誤信息是錯誤的三個列字段錯誤重疊如下圖所示：

我怎樣才能獲得該效果（與Photoshop修改）：

預先感謝。

Answer 1

沒有什麼不對您的錯誤位置的代碼。您的大部分問題都是由無效的HTML和缺少規則引起的。 （我不會用一個table爲form佈局......有更好的，更現代的方式做這樣的佈局）

---

根本原因：

1）你在多個元素上重複了id="tris"，這些元素是無效的HTML並且破壞了代碼。重複id的元素將被忽略。改爲使用class。

2）您未能爲這四個附加字段定義任何規則。所以當然，沒有錯誤會顯示在任何地方。

---

好主意來解決：

3）刪除所有尾隨逗號。儘管這隻會破壞舊版Internet Explorer中的代碼，但留下的逗號是一種草率的編碼習慣。

4）你失蹤在table最後<tr></tr>最後</td>標籤。

5）如果error.insertAfter(element)是其中唯一的代碼，則不需要指定自定義的errorPlacement回調函數。由於這只是插件的默認代碼，因此可以從插件選項中刪除errorPlacement。

---

工作演示：http://jsfiddle.net/9bRXd/

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

    $('#form_register').validate({ 
     rules: { 
      ragsoc: { 
       required: true, 
       minlength: 2 
      }, 
      piva: { 
       required: true, 
       digits: true 
      }, 
      codfisc: { 
       required: true 
      }, 
      gruppo: { 
       required: true 
      }, 
      insegna: { 
       required: true 
      }, 
      rapporto: { 
       required: true 
      } 
     }, 
     errorElement: "div", 
     messages: { 
      ragsoc: "Inserire la ragione sociale.", 
      piva: "Solo numeri accettati.", 
      gruppo: "inserire un valore." 
     } 
    }); 

}); 

Answer 2

如果你在jsFiddle上發佈一個例子，但只是看看我會建議這個的代碼會更容易找出。

errorPlacement: function(error, element) 
       { 
        error.insertAfter(element); 

        // Use jQuery UI's position function to get placement correct 
        error.position ({ 
            my: 'left top', 
            at: 'left bottom', 
            of: element 
            }); 
       } 

這裏假設你有jQuery UI和jQuery驗證插件。你可能不得不玩弄錯誤的CSS來使它看起來完全符合你的想法。

這裏是位置API：http://api.jqueryui.com/position/