Question

让我解释一下：

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

示例：

<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（）函数，但如果两个不同的输入同样接近所需的输入，则可能导致不需要的结果（如上例所示）。

非常感谢任何帮助。

Answer 1

您可以使用jQuery中的任何一个selectors并将其与一个或多个其他选择器相结合，选择与jsFiddle无关的控件。

在您提供的代码段中，您要选择的控件（input1和select1）是表格单元格元素的子元素，该元素是“必需”类的单元格的兄弟元素，所以我们可以建立一个选择：

$(".required + td").child

分解为：

找到应用了“required”类的元素。这将为我们提供2个表格单元格：
```
<td class="required">Description</td>
```
和
```
<td class="required">Location</td>
```
对于 1。返回的每个元素，请使用“{next}”选择器+和td来获取下一个表格单元格：
```
<td><input id="input1" /></td>
```
和
```
<td><select id="select1" /></td>
```
对于 2返回的每个元素。获取子元素：
```
<input id="input1" />
```
和
```
<select id="select1" />
```

还有{{3}}来说明对目标的操作（将边框更改为深红色）。

修改
这是有效的，因为您的代码段中的布局始终将要定位的元素放在相对于具有选择条件的元素的相同位置。你必须有一些一致的方法来查找没有用class / id标记的元素，否则你无法实现目标。

Answer 2

虽然我喜欢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元素相对的位置，则无需担心。

无论类型（输入，选择等）如何，选择最接近的控制元素进行验证

2 个答案: