0

我遇到了一个小的 jquery 代码问题。我正在尝试将错误消息插入跨度，但我认为我无法正确定位跨度。

这是我的html代码...

<div>İsim <span style="font-size:9px;color:red"></span></div><div style="line-height: 3px">&nbsp;</div><div><input type="text" id="txt_isim" onkeypress="$('#txt_isim_4').val($('#txt_isim').val());" onKeyUp="$('#txt_isim_4').val($('#txt_isim').val());" style="width: 200px" class="blue_input required" minlength="3" /></div><div style="line-height: 6px">&nbsp;</div>

这是jQuery代码

<script>
    $(document).ready(function () {
        $("#txt_isim").validate({
            submitHandler: function () {
                return false;
            },
            errorPlacement: function (error, element) {
                error.appendTo(element.prev().parent("span"));
            }
        });
    });
</script>

我正在尝试验证“txt_isim”并在跨度中显示错误消息。但我想我无法使用 PREV() 和 PARENT() 函数找到跨度。我的代码有什么问题？

注意：如果我给一个 ID 跨度并放入 $('#id_span')，它会完美运行。但我需要在没有 ID 的情况下这样做。请帮忙

4

2 回答 2

1

你可以试试这个：

<script>
    $(document).ready(function () {
        $("#txt_isim").validate({
            submitHandler: function () {
                return false;
            },
            errorPlacement: function (error, element) {
                error.appendTo(element.parent().prev().prev().children('span'))
            }
        });
    });
</script>

小提琴：http: //jsfiddle.net/Hkkyp/1/

但这不是安全的方式，因为它取决于您的 html 结构，并且如果您在 div 之间添加例如另一个元素，它将不再起作用。

我更愿意为您的跨度添加一个类，而不是使用类选择器添加您的消息。

于 2013-03-04T16:00:35.523 回答
0

在您的情况下，我建议您为与单个字段相关的多个部分创建一个容器元素

<div class="field">
    <div>Isim 
        <span class="error-handler" style="font-size:9px;color:red"></span>
    </div>
    <div style="line-height: 3px">&nbsp;</div>
    <div>
        <input type="text" id="txt_isim" onkeypress="$('#txt_isim_4').val($('#txt_isim').val());" onKeyUp="$('#txt_isim_4').val($('#txt_isim').val());" style="width: 200px" class="blue_input required" minlength="3" />
    </div>
    <div style="line-height: 6px">&nbsp;</div>
</div>

然后在errorPlacement

error.appendTo(element.closest('.field').find(".error-handler"))

演示：小提琴

于 2013-03-04T16:14:53.470 回答