Supprimer tous les attributs requis dans le formulaire, le cas échéant, du groupe de formulaire est valide

Question

J'ai travaillé sur l'exigence qu'il existe plusieurs groupes de formulaires dans mon formulaire lorsque l'un des groupes de formulaires est valide et qu'il reste entier. l'attribut groups required doit être supprimé. pourquoi parce que dans cette forme, n'importe lequel des uer est suffisant.

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