1

El siguiente codigo hace que mi elemento nuevo se inserte despues del elemento input:

.validate({ errorPlacement: function (error, element) { element.after(error); },

Es decir, tengo este codigo HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<fieldset class="form-group">
  <input type="email" class="form-control" id="email-label" placeholder="" />
  <label for="email-label">Your Email</label>
</fieldset>
<style>
  body {
    margin: 50px;
  }
  
  fieldset.form-group {
    position: relative;
  }
  
  label {
    position: absolute;
    top: .6rem;
    left: 1rem;
    transition: all .4s linear;
  }
  
   :focus+label {
    color: #800040;
    top: -15px;
    background: #F2F2F2;
  }
</style>

Si ese campo lo dejo vacio, se me agrega un label despues del input:

<label id="confirm-error" class="error" for="confirm">Este campo es requerido.</label>

Quedando el codigo de la siguiente manera:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<fieldset class="form-group">
  <input type="email" class="form-control" id="email-label" placeholder="" />
  <label id="confirm-error" class="error" for="confirm" style="color:red">Este campo es requerido.</label>
  <label for="email-label">Your Email</label>
</fieldset>
<style>
  body {
    margin: 50px;
  }
  
  fieldset.form-group {
    position: relative;
  }
  
  label {
    position: absolute;
    top: .6rem;
    left: 1rem;
    transition: all .4s linear;
  }
  
   :focus+label {
    color: #800040;
    top: -15px;
    background: #F2F2F2;
  }
</style>

Y lo que quiero es que quede debajo, asi:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<fieldset class="form-group">
  <input type="email" class="form-control" id="email-label" placeholder="" />
  <label for="email-label">Your Email</label>
</fieldset>
 <label id="confirm-error" class="error" for="confirm" style="color:red; padding-top:80px; padding-left:30px">Este campo es requerido.</label>
<style>
  body {
    margin: 50px;
  }
  
  fieldset.form-group {
    position: relative;
  }
  
  label {
    position: absolute;
    top: .6rem;
    left: 1rem;
    transition: all .4s linear;
  }
  
   :focus+label {
    color: #800040;
    top: -15px;
    background: #F2F2F2;
  }
</style>

Entonces como digo en el primer codigo que adjunte que enlugar de que sea despues del Input, sea despues del Form-Group, es decir despues de </fieldset>

1 respuesta 1

0

Puedes probar a buscar al tag padre del input:

.validate({ errorPlacement: function (error, element) {
    element.parent().after(error);
}, ...
1
  • Gracias amigo, era lo que buscaba, ahora te pregunto spor si sabes, como puedo agregarle propiedades como el padding-top?
    – afar1793
    Commented el 20 sept. 2017 a las 16:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.