Function Jquery to select tab with required fields not filled

Question

Function Jquery to select tab with required fields not filled

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I use the tab of bootstrap and required of dataannotations , but the following happens, you do not know the fields of the required, when it is not in tab of it, for example, I am in tab 1, and I conclude, however in 2 fields with required are not filled, not to know, I'd like it to be tab where fields with required were not filled.

I tried this code, both in submit and with the click of button , but it did not 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 here 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');
        });
    });

javascript jquery twitter-bootstrap

asked by anonymous 04.10.2018 / 22:11

2 answers

How to allocate space for each structure of a vector as the user wishes? How to expose only a few columns of the table in a WebService via SOAP?

score 1 · Answer 1

Follow 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><scriptsrc="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><linkhref="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><divclass="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>

score 0 · Answer 2

Do not resolve by removing element attributes:

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

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