Home / Questions / 1076
Accepted
Henry Rodriguez
Asked: 2020-12-16 16:19:06 +0800 CST 2020-12-16 16:19:06 +0800 CST

如何使用 jquery.validate 验证在 Bootstrap 中分为几个选项卡的表单？

  • 772

我有一个表单，我将字段划分为不同的选项卡，并使用jquery.validate 对其进行验证，但在验证时，它似乎只采用可见的输入，即显示的输入在活动选项卡中。

我的表格如下所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<form class="form-horizontal" submit.delegate="save()">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal</a>
    </li>
    <li role="presentation">
      <a href="#ubicacion" aria-controls="ubicacion" role="tab" data-toggle="tab">Ubicación</a>
    </li>
    <li role="presentation">
      <a href="#contacto" aria-controls="contacto" role="tab" data-toggle="tab">Contacto</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="personal">
      <div class="form-group">
        <label for="PrimerNombre" class="control-label col-xs-3">Primer Nombre</label>
        <div class="col-xs-9">
          <input required type="text" class="form-control" value.bind="currentItem.PrimerNombre" name="PrimerNombre">
        </div>
      </div>
      <!--- ...  -->
    </div>
    <div role="tabpanel" class="tab-pane" id="ubicacion">
      <div class="form-group">
        <label for="Direccion" class="control-label col-xs-3">Dirección</label>
        <div class="col-xs-9">
          <input maxlength="200" type="text" class="form-control" value.bind="currentItem.Direccion" name="Direccion">
        </div>
      </div>
      <!--- ...  -->
    </div>
    <div role="tabpanel" class="tab-pane" id="contacto">
      <div class="form-group">
        <label for="Celular" class="control-label col-xs-3">Celular</label>
        <div class="col-xs-9">
          <input required maxlength="10" type="text" class="form-control" value.bind="currentItem.Celular" name="Celular">
        </div>
      </div>
      <!--- ...  -->
    </div>
  </div>
</form>

提交表单数据时会触发验证，如下所示：

save() {

    if ($("form").validate().form()) {

        //Código Guardado

    }

}

笔记

我用aurelia.io它来绑定字段和它所在的模型，TypeScript但我认为这根本不会影响验证插件的功能。

javascript

2 Answers

  1. Best Answer

    验证不可见的字段通常不是一个好主意，但您可以使用以下代码启用它：

    $.validator.setDefaults({ 
  ignore: [],
});
    • 4

  2. 你可以有一些函数遍历表单的所有元素并分别检查每个元素的有效性

    var esValido = true;
$(formulario).find("input, select").each(function () {
    $(this).valid();        
});
    • 2