Блог

Я бы удалил обязательный тег из полей, находящихся на скрытых вкладках, когда я нажимаю на вкладку с помощью Javascript. Поля с обязательным тегом, поскольку они не используются, блокируют форму отправки, предотвращая вставку в базу данных. Это мой код:

 <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="amp;quot;selectedamp;quot;"></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>
  

Сначала найдите все элементы select, затем просмотрите их, если они отображаются как display: none, затем измените требуемый атрибут на false.

 document.querySelectorAll('select').forEach((elem) => {
  if (window.getComputedStyle(elem).display === 'none') {
    elem.required = false;
  }
});
  

Если вы знаете идентификаторы или классы элементов, которые не будут отображаться, то вы можете просто использовать их вместо использования цикла.