如何检查整个Div是否有效？

我有这样的HTML。如何检查整个Div是否有效？

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是否有效。如何检查这一点，除了循环遍历所有元素并检查？

来源

2015-10-20 Jayababu

我想你需要确认他们每个人，因为他们是孩子你'＃personalInfo' – Onilol

使用自定义的验证，你可以做到这一点，请尝试使用jQuery验证插件。在自定义验证中，如果发生错误，您可以为div分配一个错误类。 – Mayank

目前与CSS没有办法将CSS发送到父对象没有一些JavaScript魔术。

对不起:-(

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

如果做想使用jQuery检查您可以执行的子元素的有效性：

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

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

来源

2015-10-20 13:45:42 Neal

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

DEMO

来源

2015-10-20 13:59:33 Griffith

如何检查整个Div是否有效？

回答

相关问题