从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/