jquery.validate.js does not work without form-group (Bootstrap)

Question

The validation of jquery.validate.js only works when the input this one inside
<div class="form-group">, for example if I put the code:

  <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>

If you leave the input empty and click the button Submit it does not show the message 'Campo requerido' on screen, but if I do:

 <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>

Adding a div with form-group works, but I don’t want to use the form-group because it takes formatting from the field and then changes the design.

Is there any way to use the validator without the form-group?

Just to complement, it validates, but does not display the message without the form-group.

If I add my style modifications to the form group, it gets kind of bizarre. below field image with the form-group and without it, see that the input has become square and no edges and as had decreased the margin-Botton the error label is behind the input.

Answer 1

The .validate plugin should be used in ID of the form, as per Example fiddle.

---

Here is the Snippet used, however it is with error in the script, but it is the same code of Example fiddle.

$("#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>

---

I used the jquery.validate.js of the site jqueryvalidation.org, I don’t know if it’s the same one you used, but in Fiddle is working perfectly.

Answer 2

Simple, the jquery.validade positions the elements using position:absolute therefore for a coherent functioning it will be necessary that it is enclosed in an element with position:relative.

To resolve it would suffice that the div.inner-addon is with the following attribute:

.inner-addon {
    position: relative
}