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

让我解释一下：

我有一个表格和一些字段是必需的，我正在尝试创建自定义验证

例如：

<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>

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

---

任何帮助都将不胜感激。

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

在您提供的代码片段中，要选择的控件（

input1

和

select1

）是表单元格元素的子元素，该表单元格元素是类为“required”的单元格的同级元素，因此我们可以构建一个选择：

$(".required + td").child

具体如下：

查找应用了“required”类的元素。 这将为我们提供两个表格单元格：

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

及

对于2返回的每个元素。获取子元素：

<input id="input1" />

及

还有一个示例来说明目标上的操作（将边框更改为深红色）

编辑

---

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

虽然我喜欢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; 
            }

函数validateForm（）{
var self=这个；
var validationPassed=true；
//首先，我将收集数组中的每个.required元素
var requiredTags=document.queryselectoral（“.required”）；
//然后我将循环遍历数组
对于（变量i=0；i

通过这种方式，我检查所有必需的字段是否都为空并返回true，或者返回false和警告用户的警报

---

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

为什么不能将“必需”类应用于控件本身？@Raad I最初使用必需类更改css或标签。但是我想我可以专门为那些有“required”类的元素修改css，并且仍然使用该类作为控件。我只是想到了另一种方法，这可能会为我解决这个问题。我可以为每个具有类“required”的td提供一个自定义属性labelFor=“inputId”，通过获取每个所需标签的labelFor值，我将获得相应控件的Id。尽管如此，出于教育目的，我仍然希望得到一个关于如何选择控件的答案，而不考虑类型（输入、元素等）Panagiotis-在您的示例中，我假设您希望返回

input1

和

select1

作为“必需”字段…？+1，因为您以我最初希望的方式回答了我的问题！不过，你最后描述的问题就是我选择另一条路的原因。我贴了一个答案，如果你想看看，也许可以评论一下。又来了！

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

<input id="input1" />

<select id="select1" />

<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; 
            }