我有一个这样的 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
是否有效。
除了遍历所有元素并检查之外,我该如何检查?
最佳答案
目前对于 CSS,如果没有一些 javascript 魔法,就无法将 CSS 发送到父对象。
对不起:-(
CSS 仅允许您更改单个节点的子元素(或兄弟元素)。
如果您确实想使用 jquery 来检查您的子元素的有效性,您可以这样做:
$('#personalInfo :valid').length; // gives you the size of the valid input objects
它查询 #personalInfo
的所有有效子元素。
关于javascript - 如何检查完整的div是否有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33238286/