1

A validaçao do jquery.validate.js só funciona quando o input esta dentro de
<div class="form-group">, por exemplo se eu coloco o código:

  <div class="row">
     <div class="col-sm-12 col-md-12 col-lg-12">
         <div class="inner-addon left-addon">
             <i class="glyphicon glyphicon-log-in"></i>
             <input id="id_codigo_empresa" name="codigo_empresa" 
                  type="number" class="form-control" maxlength="6"
                          placeholder="Código da entidade" required>
         </div>
     </div>
  </div>

Se deixar o input vazio e clicar no botão submit ele não mostra a mensagem 'Campo requerido' na tela, porém se eu faço:

 <div class="form-group">
    <div class="row">
         <div class="col-sm-12 col-md-12 col-lg-12">
             <div class="inner-addon left-addon">
                 <i class="glyphicon glyphicon-log-in"></i>
                 <input id="id_codigo_empresa" name="codigo_empresa"
                      type="number" class="form-control" maxlength="6" 
                              placeholder="Código da entidade" required>
             </div>
         </div>
    </div>
 </div>

Acrescentando uma div com form-group funciona, mas não quero usar o form-group porque ele tira a formatação do campo e dai muda o design.

Tem alguma forma de usar o validador sem o form-group?

Só pra complementar, ele valida, porém não exibe a mensagem sem o form-group.

se acrescento as minhas modificações do estilo com o form group a coisa fica meio bizarra. abaixo imagem do campo com o form-group e sem o ele, vejam que o input ficou quadrado e sem bordas e como tinha diminuído o margin-botton o label do erro fica por traz do input.

inserir a descrição da imagem aqui

4
  • Tem como disponibilizar um Fiddle de exemplo usando essas classes do bootstrap com o validator? Commented 28/06/2017 às 20:18
  • Você disse: "Só pra complementar, ele valida, porém não exibe a mensagem sem o input-group.", você já verificou o que essa classe faz nos campos? Da uma verificada no arquivo.css, onde tem essa classe, tenta inspecionar os elementos da página (F12), para ver como está sendo montada a página. Commented 28/06/2017 às 20:29
  • 1
    ao invés de você tentar tirar a div form group, porque não tenta dar um !important no seu próprio estilo do css? dessa forma o form não ficara desconfigurado como você disse
    – Bsalvo
    Commented 29/06/2017 às 11:37
  • @BrunoCastro , tentei mas fica meio bizarro, postei uma imagem Commented 29/06/2017 às 12:19

2 Respostas 2

0
+50

O .validate do plugin deve ser usado no ID do formulário, conforme Fiddle de exemplo.


Aqui está o Snippet usado, porém está com erro no script, mas é o mesmo código do Fiddle de exemplo.

$("#formulario").validate();
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-sm-12 col-md-12 col-lg-12">
    <div class="inner-addon left-addon">
      <i class="glyphicon glyphicon-log-in"></i>
      <form class="cmxform" id="formulario" method="get" action="">
        <fieldset>
          <legend>Por favor entre com seu nome, email e um comentário.</legend>
          <p>
            <label for="cname">Nome (Requer, no mínimo 2 caracteres)</label>
            <input id="cname" name="name" minlength="2" type="text" required>
          </p>
          <p>
            <input id="id_codigo_empresa" name="codigo_empresa"
               type="number" class="form-control" maxlength="6"
               placeholder="Código da entidade" required>
          </p>
          <p>
            <label for="cemail">E-Mail (requerido)</label>
            <input id="cemail" type="email" name="email" required>
          </p>
          <p>
            <label for="curl">URL (opcional)</label>
            <input id="curl" type="url" name="url">
          </p>
          <p>
            <label for="ccomment">Seu comentário (requerido)</label>
            <textarea id="ccomment" name="comment" required></textarea>
          </p>
          <p>
            <input class="submit" type="submit" value="Submit">
          </p>
        </fieldset>
      </form>
    </div>
  </div>
</div>


Utilizei o jquery.validate.js do site jqueryvalidation.org, não sei se é o mesmo que você usou, mas no Fiddle está funcionando perfeitamente.

5
  • funcionou o seu código, porém me deparei com outro problema, estou usando o form-wizard do bootstrap ( <fieldset>), aquele que tem abas e ele ja tem um botão de 'proximo' e anterior, então eu só dou um submit na ultima etapa. vc acha que eu devo parar de usar esse form-wizard? Commented 29/06/2017 às 12:19
  • Ele (Form-Wizard) está dando algum problema? Se não, não vejo problemas de continuar usando. Commented 29/06/2017 às 12:38
  • Se a resposta ajudou, não esqueça de marcar como correta e avaliar ;) Commented 29/06/2017 às 12:39
  • 1
    já marquei como correta e confirmei os 50 pontos, isso me ajudou, obrigado. Vou só ver como posso fazer para o botão próximo chamar esse evento, na verdade vejo que ele valida, porém não aparece a mensagem. Commented 29/06/2017 às 12:47
  • Considere criar outra pergunta para resolver esse problema em específico ;) Commented 29/06/2017 às 13:09
-1

Simples, o jquery.validade posiciona os elementos utilizando position:absolute portanto para um funcionamento coerente será necessário que ele esteja enclausurado em um elemento com position:relative.

Para resolver bastaria que a div.inner-addon esteja com o seguinte atributo:

.inner-addon {
    position: relative
}
1
  • fiz como você mostrou, acrescentei esse style a .inner-addon mas não funcionou, tentei em outras divs, mas nada, fiz uma edição na minha pergunta, o correto é form-group e não input-group. Commented 29/06/2017 às 1:51

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 .