Skip to main content
<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>

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

Estoy usando aurelia.ioaurelia.io para bindar los campos y el modelo que está en TypeScriptTypeScript pero no creo que esto afecte en algo la funcionalidad del pluginplugin de validación.

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

Estoy usando aurelia.io para bindar los campos y el modelo que está en TypeScript pero no creo que esto afecte en algo la funcionalidad del plugin de validación.

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

Estoy usando aurelia.io para bindar los campos y el modelo que está en TypeScript pero no creo que esto afecte en algo la funcionalidad del plugin de validación.

Origen Enlace

¿Cómo validar con jquery.validate un formulario dividido en varias tabs en Bootstrap?

Tengo un formulario donde divido los campos en diferentes tabs, y lo estoy validando con jquery.validate pero al momento de la validación al parecer sólo está tomando los input que se encuentran visibles, es decir los que se muestran en el tab activo.

Mi formulario luce de la siguiente forma:

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

La validación se dispara a la hora de enviar los datos del formulario así:

save() {

    if ($("form").validate().form()) {
       
        //Código Guardado

    }

}

Nota

Estoy usando aurelia.io para bindar los campos y el modelo que está en TypeScript pero no creo que esto afecte en algo la funcionalidad del plugin de validación.