选择文本框之前的标签文本答案

【问题标题】：selecting Label text which is before textbox选择文本框之前的标签文本
【发布时间】：2013-09-25 06:08:06
【问题描述】：

我正在使用 JQUery 工具 - Validation Error Summary

/* adds an effect called "wall" to the validator */
        $.tools.validator.addEffect("wall", function(errors, event) {
                // get the message wall
                var wall = $(this.getConf().container).fadeIn();
                // remove all existing messages
                wall.find("p").remove();
                // add new ones
                $.each(errors, function(index, error) {
                    wall.append(
                        "<p><strong>" +error.input.attr("name")+ "</strong> " +error.messages[0]+ "</p>"
                    );
                });
                // the effect does nothing when all inputs are valid
        }, function(inputs)  {

        });

如果您可以看到图像一切正常，我想要的是，通过更改此代码，而不是文本框名称，我希望在错误消息之前显示标签文本。

提前致谢。编辑 :HTML

<tbody style="" class="user_panel" id="customer_info">
  <tr>
    <td valign="top"><label class="label">Contact name:</label>
      <input type="text" value="" name="contact_name" class="" style="width:227px"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td valign="top"><label class="label">Measurement:</label>
      <select value="" data-message="Measurement is required1" required="required" name="measurement" style="width: 231px; border-color: red;">
        <option value="">-select-</option>
        <option value="1">mm</option>
        <option value="2">inches</option>
      </select></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td valign="top"><label class="label">Phone personal:</label>
      <input type="text" value="" data-message="Pers cont. num is required" required="required" name="contact_number_person" class="" style="width: 227px; border-color: red;"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>

【问题讨论】：

你能发布你的html吗？

标签： jquery validation jquery-tools validationsummary

【解决方案1】：

在//添加新的注释下更改您的JavaScript：

$.each(errors, function(index, error) {
    wall.append(
        "<p><strong>" +error.input.prev().html()+ "</strong> " +error.messages[0]+ "</p>"
    );
});

它不会打印输入对象的名称属性，而是打印 previous 元素内的 html，即 label

【讨论】：

【解决方案2】：

如果您将属性 for 添加到标签中，例如

<label class="label" for="contact_name">Contact name:</label>

那么你可以：

wall.append(
                    "<p><strong>" +$("label[for='"+ error.input.attr("name")+"']").text()+ "</strong> " +error.messages[0]+ "</p>"
                );

这解决了另一个元素位于标签和输入之间的可能性。或者，如果您希望标签跟随输入。

【讨论】：