0
I’m trying to get the id of the tab in this way:
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’s not picking up, I need it to pick up the id, where it has the field required invalidated.
Remembering that I use the required of dataannotations.
Always come Undefined 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>
But your code doesn’t have
.tab-paneindiv. Where?– Wallace Maxters
@Wallacemaxters edited the question with the tab part.
– Mariana
Your jQuery tries to catch what’s inside the
.tab-pane, but your.tab-panehas nothing.– Wallace Maxters
It is because it does not include in the code, but has yes, it does not recognize, remembering that the
requiredand ofdataannotations.– Mariana
It seems to me that this
dataannotationsdoes validation in a particular way, so jQuery has no way of knowing which field is required. You could from the field if the attributerequired, but that does not seem to be the case.– Sam
@sam has some way to resolve ? without the field being required ? only in dataannotations ?
– Mariana
That, I want him to check the fields that are invalid, and then he takes the tab, if he has field in tab 1 he opens to 1, if he has tab 2 he opens to 2, as the validation. @sam
– Mariana
@Sam in this case, it’s just empty even.
– Mariana
Are all
input, or hasradio,select,checkbox,textarea?– Sam
@sam has input and select which are mandatory
– Mariana