-1

Tenho um modal, onde preciso fazer as validações dos campos, porém no modal não consigo colocar o required=required, pois ele não abre o modal.

Como posso proceder, para que na função funcione como required?

Segue as funções que estou utilizando:

Esta é um asterisco, e quando o usuário preenche o campo, muda para um sinal de ok.

$(document).ready(function() {
  $('.input-group input[required], .input-group textarea[required], .input-group select[required]').on('keyup change', function() {
    var $form = $(this).closest('form'),
      $group = $(this).closest('.input-group'),
      $addon = $group.find('.input-group-addon'),
      $icon = $addon.find('span'),
      state = false;

    if (!$group.data('validate')) {
      state = $(this).val() ? true : false;
    } else if ($group.data('validate') == "email") {
      state = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($(this).val())
    } else if ($group.data('validate') == 'phone') {
      state = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/.test($(this).val())
    } else if ($group.data('validate') == "length") {
      state = $(this).val().length >= $group.data('length') ? true : false;
    } else if ($group.data('validate') == "number") {
      state = !isNaN(parseFloat($(this).val())) && isFinite($(this).val());
    }

    if (state) {
      $addon.removeClass('danger');
      $addon.addClass('success');
      $icon.attr('class', 'glyphicon glyphicon-ok');
    } else {
      $addon.removeClass('success');
      $addon.addClass('danger');
      $icon.attr('class', 'glyphicon glyphicon-asterisk');
    }

    //if ($form.find('.input-group-addon.danger').length == 0) {
    //    $form.find('[type="submit"]').prop('disabled', false);
    //} else {
    //    $form.find('[type="submit"]').prop('disabled', true);
    //}
  });

  $('.input-group input[required], .input-group textarea[required], .input-group select[required]').trigger('change');


});

E esta é pra borda do textbox ficar em vermelho quando clica e e quando digita ela muda de cor:

$(document).ready(function () {

    $('#contact-form').validate({
        rules: {
            txtnome: {
                minlength: 2,
                required: true
            },
            txtHora: {
                required: true
            },
            txtData: {
                required: true
            }
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.text('OK!').addClass('valid')
                .closest('.control-group').removeClass('error').addClass('success');
        }
    });

});

Tentei colocar com o nome do elemento, e colocar required na função, porém não deu certo.

Este é o código do meu modal:

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="row">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <div class="panel panel-default">
            <div style="text-align: center;" class="panel-heading">
              <p class="panel-title">
                <asp:Label ID="Label78" runat="server" Font-Size="Large" Text="Modal"></asp:Label>
              </p>
            </div>
            <div class="row">
              <div class="modal-body">
                <div class="form-group">
                  <div style="display: none;" id="idalertModal" class="form-group">
                    <div class="alert alert-danger alert-dismissable fade in">
                      <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                      <strong>Atenção!</strong>
                      <asp:Label ID="lbAlertAviso" runat="server" Text="Label"></asp:Label>
                    </div>
                  </div>
                </div>

                <div class="col-md-2">
                  <asp:Label ID="Label18" runat="server" Text="Hora"></asp:Label>
                </div>
                <div class="col-md-3">
                  <div class="input-group">
                    <asp:TextBox ID="txtHora" runat="server" class="form-control" onblur="Verifica_Hora(this);"></asp:TextBox>
                    <span class="input-group-addon danger"><span class="glyphicon glyphicon-asterisk"></span></span>
                  </div>
                </div>
                <div class="col-md-1">
                  <asp:Label ID="Label250" runat="server" Text="Data"></asp:Label>
                </div>
                <div class="col-md-4">
                  <div class="input-group">
                    <asp:TextBox ID="txtData" runat="server" class="form-control" onblur="limparDataInvalida(this);"></asp:TextBox>
                    <span class="input-group-addon danger"><span class="glyphicon glyphicon-asterisk"></span></span>
                  </div>
                </div>

                <div class="col-md-2">
                  <asp:Label ID="Label19" runat="server" Text="Observação"></asp:Label>
                </div>
                <div class="col-md-9">
                  <textarea id="txtObservacao" cols="20" rows="2" runat="server" class="form-control" style="resize: none"></textarea>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <asp:Button ID="btnGravar" runat="server" CssClass="btn btn-success btn-block" Text="Gravar" OnClick="btnGravar_Click" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Cheguei nesta função, ela verifica, porém ela só funciona com o alert, quando puxo um css para colocar a borda vermelha sem preenchimento e a borda verde com preenchimento, porém não funciona.

$(document).ready(function () {
            function validateCampo(campoField) {
                if ($("#<%=txtHora.ClientID %>").val() == "") {
                    alert("vazio");
                }
                else { alert("preenchido");}

            }

            $("[id$='txtHora']").on('change', function () {
                validateCampo($(this).val());
                return false;
            })
        });

5
  • Não sei se é o seu caso ou se resolve na sua situação, mas pq vc não usa tipo <input required> e depois faz uma regra CSS com :valid e :invalid para alternar entre o asterisco e o Ok? Se quiser eu te respondo com um exemplo simples pra vc ver como fica.
    – hugocsl
    Commented 16/04/2018 às 14:14
  • Se puder me ajudar com um exemplo, vou tentar.
    – Mariana
    Commented 16/04/2018 às 14:19
  • Cara e porque vc está chamando assim ".input-group input[required]"? Não poderia remover esses [required] ?
    – hugocsl
    Commented 16/04/2018 às 18:16
  • porque eu faço isso também nos required, nos campos que são requeridos. Só que no bootstrap, eu preciso fazer a condição sem required, pois toda forma que tento com required, ele não abre o modal, por causa do click do button.
    – Mariana
    Commented 16/04/2018 às 18:21
  • @hugocsl editei a resposta, mas mesmo assim ainda não consegui fazer da forma que quero.
    – Mariana
    Commented 20/04/2018 às 20:55

1 Resposta 1

0

Consegui resolver, colocando o required, ao clicar o button, e ao concluir a operação coloco o required como false.

 function openModalIncluir() {
            $('#myModalIncluir').modal('show');
            ($("#<%=txtValorIncluir.ClientID %>").prop('required', true));
            ($("#<%=txtVencimentoIncluir.ClientID %>").prop('required', true));
        }

E aqui eu coloco como falso:

function Campos() {
              ($("#<%=txtValorIncluir.ClientID %>").prop('required', false));
            ($("#<%=txtVencimentoIncluir.ClientID %>").prop('required', false));
          }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .