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

Question

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

Navigation

#1 by (0 votes)
#2 by (-1 votes)

1

The validation of jquery.validate.js only works when input is within <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 input empty and click the submit button it does not show the 'Campo requerido' message on the 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 do not want to use form-group because it takes the formatting from the field and then changes the design.

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

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

If I add my style changes to the form group the thing gets a bit bizarre. below the image of the field with the form-group and without it, see that the input was square and without borders and as it had diminished the margin-botton the error label is behind the input.

javascript bootstrap-3

asked by anonymous 25.06.2017 / 19:20

2 answers

-1

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

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

.inner-addon {
    position: relative
}

29.06.2017 / 02:56

How to test POST requests in "Postman" in places where session authentication is required? pass value js to another page in action form

score 0 · Accepted Answer

The% plugin% should be used in the .validate of the form, as example fiddle .

Here is ID used, however it is in error in script, but it is the same example fiddle .

$("#formulario").validate();

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script><linkhref="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've used Snippet of site jqueryvalidation.org , I do not know if it's the same as you used, but not Fiddle is working perfectly.