Question

我正在使用jQuery验证，并且我试图将错误消息放在当前元素下面。我的表单是列表式（li）。我已经尝试了一些我在Stackoverflow上找到的解决方案，但它对我的代码没有用。一个问题可能是我的时间（tid）输入，因为我在一个li中有四个输入。

HTML：

<li><label>Datum *<br> <input type="text" name="datepicker" id="datepicker"></label></li>
<li>
                <label>Tid: från-till *<br> 
                <input type="text" name="time" id="time" maxlength="2" size="2"></label>:
                <input type="text" name="time" id="time" maxlength="2" size="2">&nbsp;&nbsp;&nbsp;<!--Extra space-->
                <input type="text" name="time" id="time" maxlength="2" size="2">:
                <input type="text" name="time" id="time" maxlength="2" size="2">
</li>

jQuery的：

errorPlacement: function (error, element) {
        //error.insertAfter(element);
         //error.appendTo( element.parent("li").next("li") );
         //$(element).after('<li>'+error.text()+'</li>');
         $(element).append('<li>' + error.text() + '</li>');
    } // end errorPlacement

我当前的HTML代码是否存在错误放置解决方案，还是应该更改html代码？我选择这种方式在一个li里面有多个输入类型，这使得用户更难输入错误的数据并使我更容易处理它。

Answer 1

您的代码......

$(element).append('<li>' + error.text() + '</li>');

您永远不需要在此上下文中包含HTML标记;该插件允许您通过设置<span>选项将默认的errorElement容器更改为您想要的任何内容。但是，您仍然不应在此处使用<li>容器，因为您最终会在<li></li>的内嵌入<li></li>嵌套并且＆＃39 ; s无效的HTML。

所以只需将errorPlacement作为默认值;删除它。

然后将errorElement选项设置为div，这会强制将错误消息元素放在自己的行上。

$('#myform').validate({ errorElement: 'div', rules: { // your rules } });

DEMO：http://jsfiddle.net/L1x2fraw/

注意：您不能拥有四个具有相同type="text"和name的{{1}}元素。复制id是无效的HTML并导致JavaScript损坏。重复id会破坏jQuery Validate插件，因为name属性是跟踪表单字段的方式。

修改：

如果您在保留正确的HTML结构的同时喜欢其他列表项，则可以在name选项中使用jQuery .parent()方法。该行告诉插件将错误标签errorPlacement放在包含li元素的li之后。

input

<强>结果：

$('#myform').validate({ errorElement: 'li', // <- put error inside an 'li' container errorPlacement: function (error, element) { // insert the error message 'li' after the 'li' containing the input field error.insertAfter($(element).parent('li')); }, rules: { // your rules } });

DEMO 2：http://jsfiddle.net/L1x2fraw/1/

在当前后的新行中插入错误消息

1 个答案: