I'm trying to get the id of tab like this:
var id = $('.tab-pane').find(':required:invalid').closest('.tab-pane').attr('id');
Now I'm trying this way:
$('#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;
}
});
});
But it is not catching, I need it to get the id, where it has the field required invalid.
Remember that I use required of dataannotations .
Always comes undefined the id. How to solve?
This is my 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" />
</div>
</div>
</form>