My goal is to dynamically remove the required tag from fields in hidden tabs when a tab is clicked using JavaScript. The presence of the required tag on unused fields causes issues with form submission, preventing data insertion into the database. Here's the code snippet:
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#cliente" data-toggle="tab">Cliente</a></li>
<li><a href="#azienda" data-toggle="tab">Azienda</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="cliente">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="nome">Nome*</label>
<input class="form-control" name="nome" id="nome" required="true" autocomplete="off" value="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="sesso">Sesso*</label>
<select class="form-control chosen chzn-done" name="sesso" id="sesso" required="true" style="display: none;">
<option value="" selected="\"selected\""></option>
<option value="M">M</option>
<option value="F">F</option>
</select>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="azienda">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ragione_sociale">Ragione sociale*</label>
<input class="form-control " name="ragione_sociale" id="ragione_sociale" required="true" autocomplete="off" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="desc_attivita">Descrizione attività dell'azienda*</label>
<textarea class="form-control " name="desc_attivita" id="desc_attivita" required="true"></textarea></ul>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="citta">Città*</label>
<input class="form-control " name="citta" id="citta" required="true" value="" autocomplete="off">
</div>
</div>
</div>