0

让我解释：

我有一个表格，需要一些字段，我正在尝试创建自定义验证。

例子：

<table>
   <tr>
     <td class="required">Description</td>
     <td>
        <input id="input1" />
      </td>
      <td>Phone</td>
      <td>
         <input id="input2" />
       </td>
    </tr>
    <tr>
       <td class="required">Location</td>
       <td> 
         <select id="select1"/>
       </td>
       <td>Email</td>
       <td>
          <input id="input3"/>
        </td>
    </tr>
  </table>

我想做的是找到所有需要类的元素，这很容易使用：

var requiredElements = document.querySelectorAll(".required");

然后我想找到他们最近的控制元素并检查它的值是否为空。问题是我不知道它是要输入还是选择。我正在考虑使用 .closest() 函数，但如果两个不同的输入同样接近所需的值（如上面的示例），它可能会导致不需要的结果。

任何帮助将非常感激。

4

2 回答 2

1

您可以通过使用任意一种选择器并将其与一个或多个附加选择器组合使用jQuery来选择控件，而不管其类型如何。

在您提供的代码片段中，您要选择的控件 (input1和select1) 是表格单元格元素的子元素，该单元格元素是具有“必需”类的单元格的兄弟，因此我们可以构建一个选择：

$(".required + td").child

分解为：

  1. 找到应用了“必需”类的元素。这将为我们提供 2 个表格单元格：

    <td class="required">Description</td>

    和

    <td class="required">Location</td>

  2. 对于1返回的每个元素。使用“下一个相邻”选择器+来td获取下一个表格单元格：

    <td><input id="input1" /></td>

    和

    <td><select id="select1" /></td>

  3. 对于2.返回的每个元素，获取子元素：

    <input id="input1" />

    和

    <select id="select1" />

还有一个jsFiddle来说明对目标的操作（将边框更改为深红色）。

编辑
这是有效的，因为您的代码片段中的布局始终将您想要定位的元素放置在相对于具有您的选择标准的元素的相同位置。您必须有一些一致的方法来查找未标有类/id 的元素，否则您将无法实现目标。

于 2013-02-28T15:09:06.290 回答
0

虽然我喜欢 Raad 的回答，但我想发布这个答案来说明我为解决我的问题所做的工作。

首先，我为每个标签 td 添加了一个自定义属性 labelFor ，其值等于其相应输入的 id ，如下所示：

<table>
   <tr>
     <td class="required" labelFor="input1">Description</td>
     <td>
        <input id="input1" />
      </td>
      <td labelFor="input2">Phone</td>
      <td>
         <input id="input2" />
       </td>
    </tr>
    <tr>
       <td class="required" labelFor="select1">Location</td>
       <td> 
         <select id="select1"/>
       </td>
       <td labelFor="input3">Email</td>
       <td>
          <input id="input3"/>
        </td>
    </tr>
  </table>

然后我使用了以下验证功能：

      function validateForm () {
                var self = this;
                var validationPassed = true;
                //First I will gather every .required element in an Array
                var requiredTags = document.querySelectorAll(".required"); 
                //Then I will loop through the array
                for (var i = 0; i < requiredTags.length; i++) {
//Get value of attribute "labelFor" which would be the controlId that this label refers to
                    var controlId = $(requiredTags[i]).attr("labelFor");
    //Then I use this to check if that control's value is empty.
                    if ($("#" + controlId).val() == ('' || null)) {
                        validationPassed = false;
                    }  
                }
                if (!validationPassed) {
                    alert("Please fill all the required fields");
                }
                return validationPassed; 
            }

这样，我检查所有必填字段是否不为空并返回 true，或者返回 false 并发出警告以警告用户。

我发现 Raad 在他的编辑中描述的问题是这种方法更有用的主要原因。如果您的输入元素相对于标签 td 元素始终位于相同的位置，您不必担心。

于 2013-03-01T10:47:57.640 回答