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');
});
});
:invalid
funciona com campos onde possui o atributorequired
. Não tenho conhecimento sobre esse recurso que vc está usando, odataannotations
. Se fosse só pelorequired
do HTML5 esse seu código deveria funcionar perfeitamente, e detalhe: esse laçoeach
nem é necessário, basta ver se$('input:invalid', '#FornecedorNovo').length
é true ou false que ele já acha o campo vazio.