Question

我正在使用Jquery Validation来处理错误消息，但无法让它们显示在正确的位置。目前它们默认显示在输入字段元素之后。我希望元素显示在标签和输入字段之间。

当前

<p>
   <label>Outside Comms:</label><br>    
   <textarea cols="30" rows="5" name="outsideComms"></textarea>
   <div class="error">This is the error message</div>
</p>

理想

<p>
   <label>Outside Comms:</label><br>
   <div class="error">This is the error message</div>    
   <textarea cols="30" rows="5" name="outsideComms"></textarea>
</p>

在errorPlacement中，我有以下内容，但它不起作用。我尝试的所有东西要么把它放在标签之前，要么放在输入字段之后，而不是介于两者之间。我怎么能告诉它在父母的第一个孩子之后把它放进去？

error.prependTo( element.before );

非常感谢任何帮助。

由于

Answer 1

我无法相信我花了这么长时间才这样做...大约50次上传后，下面的内容对我有效。

error.insertBefore( element );

Answer 2

听听我是怎么做的：

jQuery( "#formID" ).validate({

   rules: {
       grossSalary: { required: true, digits: true, max: 9999999}
   },
   messages: {
       grossSalary: { required: "Please enter a value", digits: "Please enter a whole number", max: "Please enter a maxiumum amount of &pound;9,999,999"}
   },
   errorPlacement : function(error, element) {
        element.next('.vError').remove();
        element.after('<div class="vError"><span class="arrow"></span>'
                + error.html() + '</div>');
    },
    success: function(error, element) {
        jQuery(element).next().remove();
   }
});

这会在输入后放置错误。所以我做了一些调查，得出以下结论：

jQuery( "#itcForm" ).validate({ rules: { grossSalary: { required: true, digits: true, max: 9999999} }, messages: { grossSalary: { required: "Please enter a value", digits: "Please enter a whole number", max: "Please enter a maxiumum amount of £9,999,999"} }, errorPlacement : function(error, element) { element.prev('.vError').remove(); element.before('<div class="vError"><span class="arrow"></span>' + error.html() + '</div>'); }, success: function(error, element) { jQuery(element).prev().remove(); } });

基本上交换＆＃39;＆＃39;在＆＃39;之前＆＃39;和（如果需要）＆＃39; next＆＃39;与＆＃39; prev＆＃39; ... 这会将错误消息放在输入元素之前。

作为一个脚注，我添加了一种“相对”的风格：相对＆＃39;到包含div和＆＃39;位置：绝对＆＃39;到.vError。以这种方式出现错误并不重要，您可以将其相对于容器内容定位......

在正确的区域中添加错误消息

2 个答案: