How to display a message below an element that has a display flex

Question

How to display a message below an element that has a display flex

Navigation

#1 by (2 votes)

0

I'm doing a Login, which is more complex than what I just posted, but in reality what I put is my problem. I am validating if the fields do not come empty, if it is empty then add an error message just below the input that was validated. In the password works well but in the mail I put it aside, this because the div that contains them has a display:flex-inline;

What can I do to download that message?

PS: I would not like to move him so much because I already have several things that work like this, but if there is no more viable solution then, no way.

Greetings

$(function() {

  $(document).on('click', '#login', function(e) {
    e.preventDefault();
    e.stopPropagation();
    //Primero borro los mensajes de error
    $('.regex_error').each(function() {
      $(this).remove();
    });

    //Asignamos variables a selectores
    var user = $('#user'),
      pass = $('#pass');
    //Limpiamos los bordes
    user.css('border-color', '#ccc');
    pass.css('border-color', '#ccc');

    //Validamos si el selector esta vacio
    if (user.val() == '') {
      //Cambiamos el borde de color
      user.css('border-color', '#ff8080');
      //Agregamos un mensaje, pero al div que contiene el selector (Es decir en el mismo div pero otro nodo)
      user.parent().append('<p class="regex_error">Este campo no puede ir vacío</p>');
    }

    if (pass.val() == '') {
      pass.css('border-color', '#ff8080');
      pass.parent().append('<p class="regex_error">Este campo no puede ir vacío</p>');
    }
  });

})

.regex_error {
  font-size: 0.7rem;
  color: #ff8080;
  margin: 0 !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="form-group">
  <label class="text-secondary" for="user">Usuario</label>
  <div class="input-group input-group-sm mb-3">
    <input
      type="text" class="form-control form-control-sm collector"
      data-key="user" data-regex="0" data-req="1"
      id="user" placeholder="Escribe tu usuario del correo electrónico">
    <div class="input-group-append">
      <span class="input-group-text">@example.com</span>
    </div>
  </div>
</div>

<div class="form-group">
  <label class="text-secondary" for="pass">Contraseña</label>
  <input
    type="password" class="form-control form-control-sm collector"
    data-key="pass" id="pass" data-regex="password" data-req="1"
    max-maxlength="15" placeholder="Escribe tu contraseña" id="pass">
</div>
<button type="button" class="btn btn-block btn-secondary" id="login">Ingresar</button>

javascript jquery bootstrap-4

asked by Alberto Siurob 18.10.2018 в 23:00

source

1 answer

How to create a drop-down list with submenu How can I verify that all input of the same class have a value of 0

score 2 · Accepted Answer

Try using .after instead of .append :

$(function(){

    $(document).on('click','#login',function( e ){
      e.preventDefault(); e.stopPropagation();
      //Primero borro los mensajes de error
			$('.regex_error').each(function(){
        $(this).remove();
      });
      
      //Asignamos variables a selectores
      var user = $('#user'),
          pass = $('#pass');
      //Limpiamos los bordes
      user.css('border-color', '#ccc');
      pass.css('border-color', '#ccc');
      
      //Validamos si el selector esta vacio
      if( user.val() == '' ){
        //Cambiamos el borde de color
        user.css('border-color', '#ff8080');
        //Agregamos un mensaje, pero al div que contiene el selector (Es decir en el mismo div pero otro nodo)
        user.parent().after('<p class="regex_error">Este campo no puede ir vacío</p>');
      }
      
      if( pass.val() == '' ){
        pass.css('border-color', '#ff8080');
        pass.parent().append('<p class="regex_error">Este campo no puede ir vacío</p>');
      }
		});

})

.regex_error{
  font-size: 0.7rem;
  color:#ff8080;
  margin: 0 !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="form-group">
          <label class="text-secondary" for="user">Usuario</label>
          <div class="input-group input-group-sm mb-3">
            <input type="text" class="form-control form-control-sm collector"
  					data-key="user" data-regex="0" data-req="1"
            id="user" placeholder="Escribe tu usuario del correo electrónico">
            <div class="input-group-append">
              <span class="input-group-text">@example.com</span>
            </div>
          </div>
      </div>

      <div class="form-group">
          <label class="text-secondary" for="pass">Contraseña</label>
          <input type="password" class="form-control form-control-sm collector"
          data-key="pass" id="pass" data-regex="password" data-req="1" max-maxlength="15"
          placeholder="Escribe tu contraseña" id="pass">
      </div>
      <button type="button" class="btn btn-block btn-secondary" id="login">Ingresar</button>

I hope it's your help.