6

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:

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

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.

2 respuestas 2

4

Normalmente no es buena idea validar campos que no estén visibles, pero puedes habilitarlo con este código:

$.validator.setDefaults({ 
  ignore: [],
});
1
  • Funcionó perfecto, gracias. Commented el 16 dic. 2015 a las 0:30
2

Podrías tener alguna función que te recorra todos los elementos del formulario y verifique la validez de cada elemento por separado

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.