Jquery function to select tab with required fields not filled

Question

I use the tab of bootstrap and the required of dataannotations, but the following happens, not to know the required fields, when it is not in the tab of him, for example, I’m in tab 1, and I conclude, but in the 2 fields with required are not filled, can not know, I would like to go to tab where the fields with required were not completed.

I tried this code both on submit and with the click of button, but it didn’t work:

$('#btnConcluir').click(function () {
        $('input:invalid').each(function () {
            // Find the tab-pane that this element is inside, and get the id
            var $closest = $(this).closest('.tab-pane');
            var id = $closest.attr('id');

            // Find the link that corresponds to the pane and have it show
            $('.nav a[href="#' + id + '"]').tab('show');

            // Only want to do it once
            return false;
        });
    });

I tried this one too:

 $('#btnConcluir').click(function () {
        console.log('entrou');
        $(':required:invalid', '#FornecedorNovo').each(function () {
            var id = $('.tab-pane').find(':required:invalid').closest('.tab-pane').attr('id');

            $('.nav a[href="#' + id + '"]').tab('show');
        });
    });

Answer 1

Follows a solution with Jquery Validation

$('#validate').validate({
  ignore: [],
  errorPlacement: function() {},
  submitHandler: function() {
    alert('Cadastro salvo com sucesso');
  },
  invalidHandler: function() {
    setTimeout(function() {
      $('.nav-tabs a small.required').remove();
      var validatePane = $('.tab-content.tab-validate .tab-pane:has(input.error)').each(function() {
        var id = $(this).attr('id');
        $('.nav-tabs').find('a[href^="#' + id + '"]').append(' <small class="required">*</small>');
        $('.nav-tabs').find('a[href^="#' + id + '"]').tab('show');
      });
    });
  },
  rules: {
    name: 'required',
    email: {
      required: true,
      email: true
    },
    zipcode: 'required',
    address: 'required',
    city: 'required'
  }
});

input.error {
  border-color: #f00 !important;
}

small.required {
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container" style="margin-top: 20px;">

  <div class="panel panel-primary">
    <div class="panel-heading">
      Formulário de cadastro
    </div>
    <div class="panel-body">
      <form action="" class="form-horizontal" id="validate">
        <ul class="nav nav-tabs nav-justified nav-inline">
          <li class="active"><a href="#primary" data-toggle="tab">Informações do contato</a></li>
          <li><a href="#secondary" data-toggle="tab">Informações de endereço</a></li>
        </ul>


        <div class="tab-content tab-validate" style="margin-top:20px;">
          <div class="tab-pane active" id="primary">
            <div class="form-group">
              <label for="name" class="control-label col-md-2">Nome</label>
              <div class="col-md-10">
                <input type="text" name="name" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="email" class="control-label col-md-2">E-mail</label>
              <div class="col-md-10">
                <input type="email" name="email" class="form-control" />
              </div>
            </div>
          </div>
          <div class="tab-pane" id="secondary">
            <div class="form-group">
              <label for="zipcode" class="control-label col-md-2">CEP</label>
              <div class="col-md-10">
                <input type="text" name="zipcode" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="address" class="control-label col-md-2">Endereço</label>
              <div class="col-md-10">
                <input type="text" name="address" class="form-control" />
              </div>
            </div>
            <div class="form-group">
              <label for="city" class="control-label col-md-2">Cidade</label>
              <div class="col-md-10">
                <input type="text" name="city" class="form-control" />
              </div>
            </div>
          </div>
        </div>
        <div class="form-group col-md-2 pull-right">
          <button type="submit" class="btn btn-success btn-block">Salvar</button>
        </div>
      </form>
    </div>
  </div>

</div>

Answer 2

Does not resolve by removing attributes from the element:

            $('#Salvar').removeAttr('type', 'submit');
            $('#Salvar').removeClass('data-toggle', 'title');
            $('#Salvar').addClass('disabled');
            $('#Salvar').removeAttr('type', 'submit');

And then just assign if all the required fields are filled in, another thing I did here at the company was create a function for the user to go to tab2 only if you have filled in all the fields in tab1, but in tab2 I did so and if it comes another more elegant way I will change to this solution.