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

Question

我一直在处理有关表单中有多个表单组的要求，当任何一个表单组有效时，应该删除组需要的属性。为什么，因为在这种形式下，任何一个人都足够了。

<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>