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

How to check whether the complete Div is valid?

本文关键字：Div 是否 有效 何检查 检查      更新时间：2023-09-26

我有一个这样的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，除非。

我需要检查div#personalInfo是否有效。除了循环遍历所有元素并进行检查外，我该如何检查呢?

目前的CSS没有办法发送CSS到父对象没有一些javascript魔法。

对不起:-(

CSS只允许更改单个节点的子元素(或兄弟元素)。

如果你做想使用jquery检查子元素的有效性，你可以这样做:

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

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

HTML5有一个内置方法checkValidity()，该方法检查form元素并返回其约束验证是否为正或负。大多数主要供应商都采用了浏览器对该方法的支持，因此请在适当的时候使用。

相关文章：