0

Estou tentando pegar o id da tab desta forma:

  var id = $('.tab-pane').find(':required:invalid').closest('.tab-pane').attr('id');

Agora estou tentando desta forma:

  $('#FornecedorNovo').on('submit', function (e) {
        $.each($('input[data-required="true"]'), function () {
            if (!this.value || this.value == '') {
                $($(this).parents('.tab-pane')[0]).trigger('click');
                e.preventDefault();
                return false;
            }
        });
    });

Porém não está pegando, eu preciso que ele pegue o id, aonde possui o campo required invalido. Lembrando que utilizo o required do dataannotations. Sempre vem undefined o id. Como resolver? Este é meu HTML

<form asp-action="Novo" id="FornecedorNovo">
<div class="panel panel-default" style="margin-top:60px">
    <div class="panel-heading">
        <h3 class="panel-title"> Adicionar Fornecedor</h3>
    </div>
    <div class="panel-body">
        <div class="form-horizontal">
            <div class="row with-nav-tabs" style="padding-left:50px; padding-right:50px; padding-top:00px;">
                <input id="hdnfldVariable" type="hidden" value="1" />
                <div class="panel-heading">
                    <ul class="nav nav-tabs" id="myTabs">
                        <li class="active"><a id="lnkfragment1" href="#fragment-1" data-toggle="tab"><span>Dados Cadastrais</span></a></li>
                        <li><a id="lnkfragment2" href="#fragment-2" data-toggle="tab"><span>Adicionais</span></a></li>
                    </ul>
                </div>
                <div class="tab-content">
                    <div id="fragment-1" style="border-style: none; height:150px;" class="tab-pane active">
                        <div class="form-group">
                            <label asp-for="Codigo" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-2">
                                <input asp-for="Codigo" class="form-control labelcss" readonly placeholder="Insira o nome do fornecedor.">
                                <span asp-validation-for="Codigo" class="text-danger"></span>
                            </div>
                            <input asp-for="Id" type="hidden" class="form-control" readonly>
                            <label asp-for="Nome" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-6">
                                <input asp-for="Nome" class="form-control" placeholder="Insira o nome do fornecedor." data-required="true">
                                <span asp-validation-for="Nome" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label asp-for="NomeFantasia" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-5">
                                <input asp-for="NomeFantasia" class="form-control" placeholder="Insira o nome do fornecedor.">
                                <span asp-validation-for="NomeFantasia" class="text-danger"></span>
                            </div>
                            <label asp-for="Contato" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-3">
                                <input asp-for="Contato" class="form-control" placeholder="Contato." data-required="true">
                                <span asp-validation-for="Contato" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label asp-for="Email" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-6">
                                <input asp-for="Email" class="form-control" placeholder="E-mail comercial." data-required="true">
                                <span asp-validation-for="Email" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label asp-for="Tel1" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-2">
                                <input asp-for="Tel1" class="form-control" placeholder="(00) 0000-0000" data-mask="(00) 0000-0000" data-required="true">
                                <span asp-validation-for="Tel1" class="text-danger"></span>
                            </div>
                            <label asp-for="Tel2" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-2">
                                <input asp-for="Tel2" class="form-control" placeholder="(00) 0000-0000" data-mask="(00) 0000-0000">
                                <span asp-validation-for="Tel2" class="text-danger"></span>
                            </div>
                            <label asp-for="Tel3" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-2">
                                <input asp-for="Tel3" class="form-control" placeholder="(00) 0000-0000" data-mask="(00) 0000-0000">
                                <span asp-validation-for="Tel3" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label asp-for="Cel1" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-2">
                                <input asp-for="Cel1" class="form-control" placeholder="(00) 00000-0000" data-mask="(00) 00000-0000">
                                <span asp-validation-for="Cel1" class="text-danger"></span>
                            </div>
                            <label asp-for="Cel2" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-2">
                                <input asp-for="Cel2" class="form-control" placeholder="(00) 00000-0000" data-mask="(00) 00000-0000">
                                <span asp-validation-for="Cel2" class="text-danger"></span>
                            </div>

                            <label asp-for="Cel3" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-2">
                                <input asp-for="Cel3" class="form-control" placeholder="(00) 00000-0000" data-mask="(00) 00000-0000">
                                <span asp-validation-for="Cel3" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                    <div id="fragment-2" style="border-style: none; height:150px;" class="tab-pane fade">
                        <div class="form-group">
                            <label asp-for="Rua" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-6">
                                <input asp-for="Rua" class="form-control" placeholder="Insira a rua do fornecedor." data-required="true">
                                <span asp-validation-for="Rua" class="text-danger"></span>
                            </div>

                            <label asp-for="Numero" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-2">
                                <input asp-for="Numero" class="form-control" placeholder="Nº." data-required="true">
                                <span asp-validation-for="Numero" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label asp-for="Bairro" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-4">
                                <input asp-for="Bairro" class="form-control" placeholder="Insira o bairro do fornecedor." data-required="true">
                                <span asp-validation-for="Bairro" class="text-danger"></span>
                            </div>
                            <label asp-for="Complemento" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-4">
                                <input asp-for="Complemento" class="form-control" placeholder="Insira o complemento do endereço." data-required="true">
                                <span asp-validation-for="Complemento" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label asp-for="Cidade" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-4">
                                <input asp-for="Cidade" class="form-control" placeholder="Insira a cidade." data-required="true">
                                <span asp-validation-for="Cidade" class="text-danger"></span>
                            </div>
                            <label asp-for="Cep" class="col-md-1 control-label" style="text-align:left;"></label>
                            <div class="col-md-2">
                                <input asp-for="Cep" class="form-control" placeholder="00000-000" data-mask="00000-000" data-required="true">
                                <span asp-validation-for="Cep" class="text-danger"></span>
                            </div>
                            <label asp-for="Estado" class="col-md-1 control-label" style="text-align:left;"></label>
                            <div class="col-md-2">
                                <select asp-for="Estado" class="form-control" data-required="true">
                                    <option disabled selected>Selecione</option>
                                    <option value="AC">AC</option>
                                    <option value="AL">AL</option>
                                    <option value="AM">AM</option>
                                    <option value="AP">AP</option>
                                    <option value="BA">BA</option>
                                    <option value="CE">CE</option>
                                    <option value="DF">DF</option>
                                    <option value="ES">ES</option>
                                    <option value="GO">GO</option>
                                    <option value="MA">MA</option>
                                    <option value="MG">MG</option>
                                    <option value="MS">MS</option>
                                    <option value="MT">MT</option>
                                    <option value="PA">PA</option>
                                    <option value="PB">PB</option>
                                    <option value="PE">PE</option>
                                    <option value="PI">PI</option>
                                    <option value="PR">PR</option>
                                    <option value="RJ">RJ</option>
                                    <option value="RN">RN</option>
                                    <option value="RS">RS</option>
                                    <option value="RO">RO</option>
                                    <option value="RR">RR</option>
                                    <option value="SC">SC</option>
                                    <option value="SE">SE</option>
                                    <option value="SP">SP</option>
                                    <option value="TO">TO</option>
                                </select>
                                @*<input asp-for="Estado" class="form-control">*@
                                <span asp-validation-for="Estado" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label asp-for="TipoPessoa" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-2">
                                <select asp-for="TipoPessoa" class="form-control" onchange="VerificaMascara();">
                                    <option value="Juridica">Jurídica</option>
                                    <option value="Fisica">Física</option>
                                </select>
                                <span asp-validation-for="TipoPessoa" class="text-danger"></span>
                            </div>
                            <div class="col-md-3">
                                <input asp-for="Documento" class="form-control" autocomplete="off" data-required="true">
                                <span asp-validation-for="Documento" id="message" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label asp-for="InscricaoEstadual" id="inscricao" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-3">
                                <input asp-for="InscricaoEstadual" class="form-control" type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
                                <span asp-validation-for="InscricaoEstadual" id="messageI" class="text-danger"></span>
                            </div>
                            <input asp-for="InscricaoIsento" type="checkbox" />
                            <label asp-for="InscricaoIsento" id="isento" class="control-label"></label>
                            <span asp-validation-for="InscricaoIsento" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="CategoriaFornecedorID" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-5">
                                <select asp-for="CategoriaFornecedorID" asp-items="@Model.CategoriaFornecedorList" id="cbcategoria" class="form-control" data-required="true">
                                    <option disabled selected>Selecione</option>
                                </select>
                                <span asp-validation-for="CategoriaFornecedorID" class="text-danger"></span>
                            </div>
                            <div class="col-md-1">
                                <th style="text-align:right"><a data-toggle="modal" data-target="#myModalCategoria" title="Adicionar Nova Categoria" class="btn btn-info"><i class="fa fa-plus fa-lg"></i></a></th>
                            </div>
                        </div>
                        <div class="form-group">
                            <label asp-for="Observacao" class="col-md-2 control-label" style="text-align:left;"></label>
                            <div class="col-md-10">
                                <textarea asp-for="Observacao" class="form-control" placeholder="Observações do fornecedor."></textarea>
                                <span asp-validation-for="Observacao" class="text-danger"></span>
                                <br />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-footer">
        <input type="submit" id="btnConcluir" class="btn btn-info" value="Concluir" />&nbsp;
    </div>
</div>
</form>
10
  • Mas seu código não tem .tab-pane na div. Cadê? Commented 25/10/2018 às 17:37
  • @WallaceMaxters editei a pergunta com a parte da tab.
    – Mariana
    Commented 25/10/2018 às 17:40
  • Seu jQuery tenta pegar o que está dentro do .tab-pane, mas seu .tab-pane não tem nada. Commented 25/10/2018 às 17:42
  • É porque não inclui no código, porém tem sim, ele não reconhece, lembrando que o required e´do dataannotations.
    – Mariana
    Commented 25/10/2018 às 17:42
  • Me parece que esse dataannotations faz validação de forma particular, logo o jQuery não tem como saber que campo é obrigatório. Vc conseguiria de no campo houvesse o atributo required, mas parece não ser o caso.
    – Sam
    Commented 25/10/2018 às 17:54

1 Resposta 1

2

Vamos resolver 2 problemas aqui, primeiro pegaremos o ID da seguinte forma :

var id = $($(this).parents('.tab-pane')[0]).attr('id');

Esse código pode ser adicionado no lugar desse :

$($(this).parents('.tab-pane')[0]).trigger('click');

Caso você queira dar um click na aba "tal" pode fazer o seguinte :

$('[href="#'+id+'"]').trigger('click');

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 .