Validate all required data fields on tab

Navigation
1

I'm using bootstrap tabs and I use dataannotations to include required . But it does not validate all fields, I need it to validate the required, and if it is not validated, it select this tab . I tried to locate the fields, but it only finds the ones of the selected tab.

I tried this code below, but it also did not work: 

    $('#FornecedorNovo').on('submit', function () {
    $(this).find('input[aria-required=true]').each(function () {
        if (!$(this).val()) {
            alert('O campo ' + $(this).attr('id') + ' é obrigatório!');
            return false;
        }
    });
});

<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.">
                                <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.">
                                <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.">
                                <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">
                                <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.">
                                <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º.">
                                <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.">
                                <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.">
                                <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.">
                                <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">
                                <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">
                                    <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">
                                <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">
                                    <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" name="name" id="btnConcluir" class="btn btn-info" value="Concluir" />&nbsp;
    </div>
</div>
    
asked by anonymous 26.10.2018 / 14:07

2 answers

2

I made an example with a custom validation using javascript and jQuery, I can set the example with 100% javascript if need be!

Let's take the example.

  

First step is to capture the form's submit event (New Provider)

     

Next step is to check if there is a valid value in all inputs that has the date-required tag with the value true.

     

If there is any null, undefined, or empty value, we will add a red border (just for testing and see who is wrong), send an alert, and prevent submitting form.

With this example you may be able to modify your code and thus make your custom validations!

References:

jQuery ON

jQuery each 

$('#FornecedorNovo').on('submit', function (e) {
  $.each($('input[data-required="true"]'),function(){
    if(!this.value || this.value == ''){
      $(this).css('border','red 1px solid');
      alert('Preencha os campos corretamente!');
      e.preventDefault();
      return false;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="FornecedorNovo">
    <input type="text" id="nome" value="" data-required="true">
    <br>
    <button type="submit">Concluir</button>
  </form>
  <input type="text" id="nomeFora" value="" data-required="true">
    
26.10.2018 / 14:38
0

The problem and its expression $(this) because it will use only the selected tab, you should use something like $('.tab-content') to search for all your inputs 

$('#FornecedorNovo').on('submit', function () {
    $('.tab-content').find('input[aria-required=true]').each(function () {
        if (!$(this).val()) {
            alert('O campo ' + $(this).attr('id') + ' é obrigatório!');
            return false;
        }
    });
});
    
26.10.2018 / 14:21
App Closes when I'm going to test Unable to instantiate activity ComponentInfo; java.lang.IllegalStateException: System services not available to Activities before onCreate ()