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

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>无效的HTML.

所以请保留errorPlacement默认值; 去掉它.

然后将errorElement选项设置为div,强制将错误消息元素放在其自己的行上.

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

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

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

编辑:

如果您希望在保留正确的HTML结构的同时使用其他列表项,则可以.parent()在该errorPlacement选项中使用jQuery 方法.该行告诉插件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
    }
});

结果:

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

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