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

How to validate with jquery.validate a form divided into several tabs in Bootstrap?

  • 772

I have a form where I divide the fields into different tabs , and I am validating it with jquery.validate, but at the time of validation, it seems that it is only taking the inputs that are visible, that is, those that are shown in the active tab .

My form looks like this:

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

The validation is triggered when submitting the form data like so:

save() {

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

        //Código Guardado

    }

}

Note

I'm using aurelia.ioit to bind the fields and the model it's in TypeScriptbut I don't think this affects the functionality of the validation plugin at all.

javascript

2 Answers

  1. Best Answer

    It's usually not a good idea to validate fields that aren't visible, but you can enable it with this code:

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

  2. You could have some function that iterates through all the elements of the form and checks the validity of each element separately

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