0

Utilizo a tab do bootstrap e o required do dataannotations, porém acontece o seguinte, não da pra saber os campos do required, quando não está na tab dele, por exemplo, estou na tab 1, e concluo, porém na 2 campos com required não estão preenchidos, não da pra saber, eu gostaria que fosse para tab onde os campos com required não foram preenchidos.

Eu tentei este código, tanto no submit e com o click do button, porém não funcionou:

$('#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;
        });
    });

Tentei este aqui também:

 $('#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');
        });
    });
3
  • Mariana, o :invalid funciona com campos onde possui o atributo required. Não tenho conhecimento sobre esse recurso que vc está usando, o dataannotations. Se fosse só pelo required do HTML5 esse seu código deveria funcionar perfeitamente, e detalhe: esse laço each nem é necessário, basta ver se $('input:invalid', '#FornecedorNovo').length é true ou false que ele já acha o campo vazio.
    – Sam
    Commented 4/10/2018 às 21:49
  • @sam vou fazer um teste desta forma, tem alguma ideia de alguma forma que eu posso verificar?
    – Mariana
    Commented 5/10/2018 às 11:33
  • @sam eu fiz o teste e não funcionou, o console ele só valida os campos do tab selecionado, e não de todos.
    – Mariana
    Commented 5/10/2018 às 11:59

2 Respostas 2

1

Segue uma solução com 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>

5
  • Ele não seleciona a tab que está faltando ser preenchida, não tem a forma de fazer isso ?
    – Mariana
    Commented 8/10/2018 às 13:17
  • @marianac_costa. Dá sim. Eu alterei a resposta e vê se te atende. Att, Commented 8/10/2018 às 13:26
  • Será que eu consigo adaptar para verificar o required do dataannotations ?
    – Mariana
    Commented 9/10/2018 às 18:27
  • @marianac_costa você querer dizer required do dataannotations do ASP NET MVC? Ou o atributo required do HTML? Commented 9/10/2018 às 19:35
  • Do ASP.NET MVC.
    – Mariana
    Commented 9/10/2018 às 19:38
0

Não resolve removendo os atributos do elemento:

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

E depois apenas atribui caso todos os campos obrigatórios estejam preenchidos, uma outra coisa que fiz aqui na empresa foi criar uma função para o usuário ir para tab2 apenas se tiver preenchidos todos os campos da tab1, mas na tab2 fiz assim e caso venha aparecer uma outra forma mais elegante mudarei para essa solução.

3
  • Não entendi muito bem o que voce quis fizer Adriano, eu preciso que dê focus e selecione a tab onde possui campos sem preenchidos que possuem o required. Neste exemplo ele apenas remove o type submit.
    – Mariana
    Commented 5/10/2018 às 12:08
  • Então, você terá que criar uma função para saber qual o índice da tab para verificar se os campos estão preenchidos daquela tab. Commented 5/10/2018 às 12:14
  • Eu fiz os testes aqui Adriano, na função que coloquei na pergunta ele só entra da tab selecionada, e eu gostaria que ele validasse de todos os campos, por isso não está funcionando, ele está reconhecendo somente os campos da tab selecionada.
    – Mariana
    Commented 5/10/2018 às 12:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .