位于非活动选项卡中的字段在提交表单时未进行验证

Question

我在选项卡式界面中面临表单验证问题。我使用带有单选按钮的常规选项卡在它们之间进行切换。但是，提交表单后，它无法验证位于非活动选项卡中的字段。

我的目标是让表单验证所有字段，无论它们在选项卡中的可见性如何。这可确保在提交表单之前正确填写所有必填字段，即使这些字段当前对用户不可见。

我没有在非活动选项卡中显示字段验证，而是在控制台中遇到一条错误消息，指出该字段不可聚焦。

<form>
  <div class="tabset">

    <!-- Tab 1 -->
    <input type="radio" name="tabset" id="tab_datospersonales" aria-controls="datos_personales" checked>
    <label for="tab_datospersonales">Datos Personales</label>
    <!-- Tab 2 -->
    <input type="radio" name="tabset" id="tab_datostrabajador" aria-controls="datos_trabajador">
    <label for="tab_datostrabajador">Datos del Trabajador</label>

    <div class="tab-panels">
      <!-- datos_personales -->
      <section id="datos_personales" class="tab-panel">
        <!--mbre-->
        <div class="input-group input-group-sm mb-3">
          <span class="input-group-text" id="inputGroup-sizing-sm">Nombre 1</span>
          <input type="text" class="form-control" id="input_trabajador_nombre" required autocomplete="off" placeholder="Ingrese su primer nombre">
        </div>

        <!-- Apellido P-->
        <div class="input-group input-group-sm mb-3">
          <span class="input-group-text" id="inputGroup-sizing-sm">Apellido P.</span>
          <input type="text" class="form-control" id="input_trabajador_apellido_p" required autocomplete="off" placeholder="Ingrese su primer apellido">
        </div>
      </section>

      <!-- datos_Trabajador -->
      <section id="datos_trabajador" class="tab-panel">

        <!-- trabajador_cargo -->
        <div class="input-group input-group-sm mb-3">
          <span class="input-group-text" id="inputGroup-sizing-sm">Cargo/Responsabilidad</span>
          <input type="text" class="form-control" id="input_trabajador_cargo" required autocomplete="off" maxlength="40" placeholder="Ingrese su Cargo/Responsabilidad">
        </div>

        <!-- trabajador_categoria -->
        <div class="input-group input-group-sm mb-3">
          <span class="input-group-text" id="inputGroup-sizing-sm">Categoría</span>
          <select class="form-control custom-select" id="input_trabajador_categoria" required>
            <option value="" disabled>seleccione...</option>
            <option value="I">Trabajador Interno</option>
            <option value="E">Trabajador Externo</option>
          </select>
        </div>
        <button id="btnGuardarNewTrabajador" type="submit">Guardar Trabajador</button>
      </section>
    </div>
  </div>
</form>

我正在寻求有关如何确保所有字段都经过验证（无论其在选项卡中的可见性如何）以及如何正确显示验证错误的指导。

Answer 1

这可能还没有准备好生产（...），但重点是您可以禁用默认的无效消息（无效回调函数中的

e.preventDefault()

）并使用 CSS 来“指示”哪些表单字段和选项卡无效.

您创建的选项卡视觉布局可能与我所做的不同，因此创建一些与您的设置相匹配的选择器，并以对您有意义的方式设置选项卡的样式。

document.forms.form01.addEventListener('invalid', e => {
  e.preventDefault();
  e.target.classList.add('invalid');
  let id = e.target.closest('section').id;
  e.target.form.querySelector(`label[for="tab_${id}"]`).classList.add('invalid');
}, true);

document.forms.form01.addEventListener('input', e => {
  if (e.target.validity.valid) {
    e.target.classList.remove('invalid');
    let section = e.target.closest('section');
    if (section) {
      e.target.form.querySelector(`label[for="tab_${section.id}"]`).classList.remove('invalid');
    }
  }
});

section {
  display: none;
}

input[name="tabset"]:checked+section {
  display: block;
}

form {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
}

label {
  order: 1;
  border-width: thin;
  border-color: black black white black;
  border-style: solid;
  padding: .1em;
  margin: 0 .1em;
  z-index: 100;
}

section {
  order: 2;
  width: 100%;
  border-width: thin;
  border-color: black;
  border-style: solid;
  padding: 1em;
}

.invalid {
  background-color: red;
}

<form name="form01">
  <!-- Tab 1 -->
  <label for="tab_datospersonales">Datos Personales</label>
  <input type="radio" name="tabset" id="tab_datospersonales" aria-controls="datos_personales" checked hidden>
  <!-- datos_personales -->
  <section id="datospersonales" class="tab-panel">
    <!--mbre-->
    <div class="input-group input-group-sm mb-3">
      <span class="input-group-text" id="inputGroup-sizing-sm">Nombre 1</span>
      <input type="text" class="form-control" id="input_trabajador_nombre" required autocomplete="off" placeholder="Ingrese su primer nombre">
    </div>

    <!-- Apellido P-->
    <div class="input-group input-group-sm mb-3">
      <span class="input-group-text" id="inputGroup-sizing-sm">Apellido P.</span>
      <input type="text" class="form-control" id="input_trabajador_apellido_p" required autocomplete="off" placeholder="Ingrese su primer apellido">
    </div>
  </section>

  <!-- Tab 2 -->
  <label for="tab_datostrabajador">Datos del Trabajador</label>
  <input type="radio" name="tabset" id="tab_datostrabajador" aria-controls="datos_trabajador" hidden>
  <!-- datos_Trabajador -->
  <section id="datostrabajador" class="tab-panel">

    <!-- trabajador_cargo -->
    <div class="input-group input-group-sm mb-3">
      <span class="input-group-text" id="inputGroup-sizing-sm">Cargo/Responsabilidad</span>
      <input type="text" class="form-control" id="input_trabajador_cargo" required autocomplete="off" maxlength="40" placeholder="Ingrese su Cargo/Responsabilidad">
    </div>

    <!-- trabajador_categoria -->
    <div class="input-group input-group-sm mb-3">
      <span class="input-group-text" id="inputGroup-sizing-sm">Categoría</span>
      <select class="form-control custom-select" id="input_trabajador_categoria" required>
        <option value="">seleccione...</option>
        <option value="I">Trabajador Interno</option>
        <option value="E">Trabajador Externo</option>
      </select>
    </div>
    <button id="btnGuardarNewTrabajador" type="submit">Guardar Trabajador</button>
  </section>
</form>