javascript - 至少一组所有html元素填充jquery

Question

假设我有一些这样的html：

<div class="users" id="user_1">
    Name: <input type="text" name="name" value="" />

    Sex : <br />
    <input type="radio" name="sex" value="male" /> Male
    <input type="radio" name="sex" value="female" /> Female

    Comments: 
    <textarea rows="5" cols="50"></textarea>
</div>

<br />

<div class="users" id="user_2">
    Name: <input type="text" name="name" value="" />

    Sex : <br />
    <input type="radio" name="sex" value="male" /> Male
    <input type="radio" name="sex" value="female" /> Female

    Comments: 
    <textarea rows="5" cols="50"></textarea>
</div>

<br />

<div class="users" id="user_3">
    Name: <input type="text" name="name" value="" />

    Sex : <br />
    <input type="radio" name="sex" value="male" /> Male
    <input type="radio" name="sex" value="female" /> Female

    Comments: 
    <textarea rows="5" cols="50"></textarea>
</div>

正如你在上面看到的，我有三个 div。每个 div 中的所有字段都是必需的。我想知道用户是否使用 jquery 填写了上述至少一个 div 中的所有字段。最简单、最有效的方法是什么？

谢谢

Answer 1

开始循环外部元素。在循环中，遍历输入元素，检查每个元素的值。如果您遍历外部 div 内的所有输入元素，但没有找到空白输入，那么您会发现一个充满非空输入的 div。跳出外循环。

var allFormValid = false;

$('.users').each(function(i, form) {
 var formValid = true;
 $(form).children().each(function(j, input) {
  if($(input).val() === '') {
   formValid = false;
   return false;
  }
 });
 if(formValid) {
  allFormValid = true;
  return false;
 }
});