Validate all required dataannotations fields in the tabs

Asked

Viewed 148 times

1

I am using tabs from bootstrap and use the dataannotations to include the required. However it does not validate all fields, I need it to validate the required, and if it is not validated, it selects this tab. I did it to try to locate the fields, but it only locates the ones of the tab selected.

I tried this code below but it didn’t work either:

    $('#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>
javascript jquery

  • So just confirming, you would have other tabs but within the event Submit ? has how to post your html ? or part of it ?

  • Who would be a New Provider in your html ?

  • @Mateusveloso Fornedornovo is the id of mine html, Submit event is form.

  • I need your html, it would be simpler to help you, and there would be no chance of error

  • There is an edit button below your question, add the snippet of your html that will help you!

  • @Mateusveloso insert the full HTML.

Show 1 more comment

2 answers

2


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

Let’s take the example.

First step is to capture the form’s Submit event (New Vendor)

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

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 form Submit.

With this example you may be able to modify your code and do 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>
  <form id="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">

  • It continues to validate only the tab selected, ignoring the other.

  • In your code I did not see closing the tag form, it is complete ? there are other forms ?

  • Another point is , changed the script to arrive in the "required fields" ?

  • It closes yes, I accidentally deleted it when I went to include the code, and it only works like this on the selected tab, if I double click on the Ubmit button, I switched to Ria-required because I use the dataannotations.

  • Okay, please change the code as it was after update.

  • I didn’t change the HTML, I just changed the code you gave me in your reply. $('#FornecedorNovo').on('submit', function (e) {&#xA; $.each($('input[aria-required="true"]'), function () {&#xA; if (!this.value || this.value == '') {&#xA; $(this).css('border', 'red 1px solid');&#xA; alert('Preencha os campos corretamente!');&#xA; e.preventDefault();&#xA; return false;&#xA; }&#xA; });&#xA; });

  • Exactly, so it didn’t work, note that in javascript code we are searching for all inputs that have data-required as attribute, make the change in html,

  • You will now have inputs like <input type="text" data-required="true"> got it ? and in the javascript code you will find them by the attribute "data-required"

  • It worked, but it doesn’t change tab.

  • As well, you want to change the tab to which the input is empty ?

  • Yes, it is possible ?

  • Everything is possible young haha, give me a second, I’ll make an example with flaps.

  • I better explain to you how to do it

  • Let’s go continue this discussion in chat.

Show 9 more comments

0

The problem and its expression $(this) pq 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;
        }
    });
});

  • Includes form HTML. I didn’t quite understand your answer.

  • changed algorithm @marianac_costa

  • It did not work, it continues to validate only the tab selected.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.