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

Question

我正在使用 jQuery 验证，我正在尝试将错误消息放在当前元素下方。我的表单是列表样式 (li)。我已经尝试了在 Whosebug 上找到的几种解决方案，但它对我的代码不起作用。一个问题可能是我的时间（tid）输入，因为我一里有四个输入。

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 代码？我选择了这种一里多输入的方式，让用户输入错误的数据更难，也让我更容易处理。

Answer 1

您的代码...

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

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

因此，请将 errorPlacement 保留为默认值；删除它。

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

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

演示：http://jsfiddle.net/L1x2fraw/

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

编辑:

如果您想要另一个列表项同时保留正确的 HTML 结构，您可以在 errorPlacement 选项中使用 jQuery .parent() 方法。此行告诉插件将错误标签的 li 放在包含 input 元素的 li 之后。

$('#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
    }
});

结果:

<ul>
    ....
    <li>
        <input type="text" name="foo" />
    </li>
    <li>This is the error message for "foo"</li>
    ....
</ul>

演示 2：http://jsfiddle.net/L1x2fraw/1/

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

Insert error message in new line after current

html

jquery

jquery-validate