javascript - 如果表单组中的任何一个有效，则删除表单中必需的所有属性

Question

我一直致力于满足以下要求:当任何一个表单组有效时，我的表单中有多个表单组，其余所有表单组所需的属性都应删除。为什么，因为以这种形式，任何一个 uer 就足够了。

   <form id="inviteTeamForm">
  <div class="form-group">
<div>
<input type="text" placeholder="First Name" name="firstName" id="firstName" class="form-control"/>
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type="text" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" />
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type='email' name="email" id="email" placeholder="Company email" class="form-control email" size="10" />
<span class="CstErrMsg">Field is required</span>
</div>
</div>
<div class="form-group">
<div>
<input type="text" placeholder="First Name" name="firstName" id="firstName" class="form-control"/>
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type="text" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" />
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type='email' name="email" id="email" placeholder="Company email" class="form-control email" size="10" />
<span class="CstErrMsg">Field is required</span>
</div>
</div>
<div class="form-group">
<div>
<input type="text" placeholder="First Name" name="firstName" id="firstName" class="form-control"/>
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type="text" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" />
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type='email' name="email" id="email" placeholder="Company email" class="form-control email" size="10" />
<span class="CstErrMsg">Field is required</span>
</div>
</div>
<div class="form-group">
<div>
<input type="text" placeholder="First Name" name="firstName" id="firstName" class="form-control"/>
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type="text" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" />
<span class="CstErrInvite">Field is required</span>
</div>
<div>
<input type='email' name="email" id="email" placeholder="Company email" class="form-control email" size="10" />
<span class="CstErrMsg">Field is required</span>
</div>
</div>
  <button type="submit" class="btn" id="inviteUser">Invite </button>
</form>
    <script>
       $("#inviteTeamForm").submit(function(){
        var formElements = $("form-group").closet();
        if(formElements.valid()){
            formElements.next.find.required = false;
        }
       })
    </script>

Thanks in advance.

Answer 1

$("#inviteUser").click(function() {
  var sumVal = "";
  $("#inviteTeamForm").find(".form-group").each(function() {
    var $this = this;

    $($this).find("input").each(function() {
      sumVal += $(this).val();
      if ($(this).val()) {
        $($this).addClass("req-validate");
        return false;
      } else {
        $($this).removeClass("req-validate");
      }
    });

    $(".form-group.req-validate")
      .find("input")
      .attr("required", true);

    $(".form-group")
      .not(".req-validate")
      .find("input")
      .removeAttr("required");
  });

  if (!sumVal) {
    console.log(sumVal)
    $(".form-group")
      .find("input")
      .attr("required", true);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="inviteTeamForm">
  <div class="form-group" id="group1">
    <div class="required">
      <input type="text" x-moz-errormessage="Enter firstName" placeholder="First Name" name="firstName" id="firstName" class="form-control" required/>
    </div>
    <div class="required">
      <input type="text" x-moz-errormessage="Enter lastName" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" required/>
    </div>
    <div class="required">
      <input type='email' x-moz-errormessage="Enter your company email" name="email" id="email" placeholder="Company email" class="form-control email" size="10" required/>
    </div>
  </div>
  <div class="form-group" id="group2">
    <div class="required">
      <input type="text" x-moz-errormessage="Enter firstName" placeholder="First Name" name="firstName" id="firstName" class="form-control" required/>
    </div>
    <div class="required">
      <input type="text" x-moz-errormessage="Enter lastName" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" required/>
    </div>
    <div class="required">
      <input type='email' x-moz-errormessage="Enter your company email" name="email" id="email" placeholder="Company email" class="form-control email" value="" required/>
    </div>
  </div>
  <div class="form-group" id="group3">
    <div class="required">
      <input type="text" x-moz-errormessage="Enter firstName" placeholder="First Name" name="firstName" id="firstName" class="form-control" required/>
    </div>
    <div class="required">
      <input type="text" x-moz-errormessage="Enter lastName" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" required/>
    </div>
    <div class="required">
      <input type='email' x-moz-errormessage="Enter your company email" name="email" id="email" placeholder="Company email" class="form-control email" size="10" value="" required/>
    </div>
  </div>
  <div class="form-group" id="group4">
    <div class="required">
      <input type="text" x-moz-errormessage="Enter firstName" placeholder="First Name" name="firstName" id="firstName" class="form-control" required/>
    </div>
    <div class="required">
      <input type="text" x-moz-errormessage="Enter lastName" placeholder="Last Name" name="lastName" id="lastName" class="form-control" value="" required/>
    </div>
    <div class="required">
      <input type='email' x-moz-errormessage="Enter your company email" name="email" id="email" placeholder="Company email" class="form-control email" size="10" value="" required/>
    </div>
  </div>
  <button type="submit" class="btn" id="inviteUser">Invite </button>
</form>