如何检查完整的 Div 是否有效？答案

【问题标题】：How to check whether the complete Div is valid?如何检查完整的 Div 是否有效？
【发布时间】：2015-10-20 13:40:53
【问题描述】：

我有一个这样的 HTML。

input:valid {
  border-bottom: 1px solid green;
}
.customInput {
  border: 0px;
  border-bottom: 1px solid red;
  width: 105px;
  outline: none;
}

<div id="personalInfo" class="info active">
  <div class="elementContainers">
    <span class="labelText ">First Name</span>
    <span class="spacing"></span>
    <input type="text" class="customInput" id="firstName" name="firstName" pattern="[A-Za-z]{2,}" required/>
  </div>
  <div class="elementContainers">
    <span class="labelText">Last Name</span>
    <span class="spacing"></span>
    <input type="text" class="customInput" id="lastName" name="lastName" pattern="[A-Za-z]{1,}" required/>
  </div>
  <div class="elementContainers">
    <span class="labelText ">Gender</span>
    <span class="spacing"></span>
    <input type="radio" name="gender" value="M">Male
    <span class="spacing"></span>
    <input type="radio" name="gender" value="F">Female
  </div>
  <div class="elementContainers">
    <span class="labelText"> Date of Birth</span>
    <span class="spacing"></span>
    <input type="text" class="customInput datepicker" name="actualDOB" required pattern=".{6,}" />
  </div>
</div>

我已使用 HTML5 模式属性来验证字段。我可以单独检查相应的字段是否有效。

像这样：

$('#firstName:valid').length

如果有效则返回 1，否则返回 0。

我需要检查div#personalInfo 是否有效。除了遍历所有元素并检查之外，我该如何检查？

【问题讨论】：

我认为你需要验证他们每个人，因为他们是你的#personalInfo的孩子
使用自定义验证可以做到这一点，尝试使用 Jquery 验证插件。在自定义验证中，您可以为 div 分配一个错误类以防出错。

标签： javascript jquery css validation

【解决方案1】：

目前如果没有一些 JavaScript 魔法，就无法通过 CSS 将 CSS 发送到父对象。

对不起:-(

CSS 仅允许您更改单个节点的子元素（或兄弟元素）。

如果您确实想使用 jquery 来检查您的子元素的有效性，您可以这样做：

$('#personalInfo :valid').length; // gives you the size of the valid input objects

查询#personalInfo的所有有效子元素。

【讨论】：

【解决方案2】：

HTML5 有一个built-in methodcheckValidity()，它检查form 元素并返回其约束验证是肯定的还是否定的。大多数主要供应商都采用此方法的browser support，因此请在适当的时候使用。

DEMO

【讨论】：